flex两列布局以及三列布局flex两列布局
左固定右适应：
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
</div>
.a {
display: flex;
height: 400px;
}
.a1 {
width: 400px;
height: 400px;
background-color: red;
}
.a2 {
flex: 1;
background-color: green;
}
flex三列布局
左右固定中间⾃适应：
<div class="b">
<!--圣杯布局-->
<div class='b-left'></div>
<div class='b-center'></div>
<div class='b-right'></div>
</div>
.b {
display: flex;
height: 200px
}
.b-left {
order: 2;
width: 100px;
background: pink;
}
.b-center {
order: 1;
flex: 1;
background: purple;
}
.b-right {
html的flex布局order: 0;
width: 100px;
background: palevioletred;
}
flex：1
等同于 flex-grow:1 放⼤⼀倍占满空间

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