flex布局的⼏种常⽤布局⽅式代码
<style>
* {
padding: 0;
margin: 0
}
.big-box {
background-color: olivedrab;
width: 100%;
height: 100px;
display: flex;
justify-content: space-around;
flex-wrap: wrap //⼀⾏装不了换⾏
}
flex布局详细讲解
.big-box .a,.b,.c {
width: 80px;
height: 100px;
background-color: bisque;
}
</style>
<div class="big-box">
<div class="a">12</div>
<div class="b">34</div>
<div class="c">56</div>
</div>
此种布局为⼩盒⼦之间的距离是两边的两倍，⽤于商品列表等布局
justify-content: space-around
justify-content: space-evenly;
justify-content：center
justify-content: space-between;
justify-content: space-evenly
.box{
align-items: flex-start | flex-end | center | baseline | stretch; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。