用到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;
}