在项目中经常碰到布局:一个父布局,包含多个子布局,其中一个或多个固定宽度,最后一个占满剩余空间。
遇到这种需求,可以用弹性盒子来实现。
布局如下:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
style如下:
.parent{
height: 100px;
display: flex;
}
.child1{
width: 200px;
background: red;
}
.child2{
width: 300px;
background: green;
}
.child3{
flex: 1;
background: blue;
}
效果如下: