flex

来源：互联网发布：js隐藏display 编辑：程序博客网时间：2024/06/05 05:45

用到flex布局，因为对复合属性的错误使用flex:55;导致在不同商品数下，布局乱掉。
实践的过程中，感觉看似怎么都可以，但需要整体的把握，不能四处尝试，否则效率很低。
以下是demo,实现骰子1~4点，以及垂直布局，中间自适应。比较浅，将继续深入。

<div id="a" class="shazi">    <div class="dian">点</div></div><div id="b" class="shazi">    <div id="b1" class="dian">点</div>    <div id="b2" class="dian">点</div></div><div id="c" class="shazi">    <div id="c1" class="dian">点</div>    <div id="c2" class="dian">点</div>    <div id="c3" class="dian">点</div></div><div id="d" class="shazi">    <div class="row">        <div id="d1" class="dian">点</div>        <div id="d2" class="dian">点</div>    </div>    <div class="row">        <div id="d3" class="dian">点</div>        <div id="d4" class="dian">点</div>    </div></div><div id="add_msg_site">    <div class="site_add_head">    </div>    <section id="J_TabBody" class="body">    </section>    <section id="bottom_selections">    </section></div>

.shazi {    width: 100 px;    height: 100 px;    background - color: lightpink;}.dian {    width: 20 px;    height: 20 px;    background - color: #FFF;}#a {    display: flex;    justify - content: center;    align - items: center;}#b {    display: flex;    justify - content: space - between;}# b1 {}# b2 {    align - self: flex - end;}# c {    display: flex;    //flex-direction:colume-reverse;    justify - content: space - around;}# c1 {}# c2 {    align - self: center;}# c3 {    align - self: flex - end;}# d {    display: flex;    flex - direction: colume;    flex - wrap: wrap;    justify - content: space - around;    align - content: space - around;}.row {    //flex: 1 1 auto;    width: 100 %;    display: flex;    flex - basis: 0 0 100 %;    justify - content: space - around;}# add_msg_site {    width: 100 %;    height: 400 px;    display: flex;    flex - direction: column;    border: 1 px solid red;}.site_add_head {    //height: 40px;    width: 100 %;    margin: 10 px 0;    background: yellow;    flex: 40 px;}# J_TabBody {    width: 100 %;    height: auto;    flex: 1 1 auto;    margin: 0;    box - shadow: none!important;    margin - bottom: 5 px;    background: red;}# bottom_selections {    width: 100 %;    //height: 135px;    flex: 135 px;    background: blue;}

0 0