等分布局:
<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
.main {
height: 300px;
width:100%;
display:flex;
.left {
flex-grow: 1;
// flex-shrink: 0;
background:blue;
}
.right {
flex-grow: 1;
// flex-shrink: 0;
background:green;
}
.middle {
flex-grow: 1;
// flex-shrink: 1;
}
}
中间自适应两边固定效果:
.main {
height: 300px;
width:100%;
display:flex;
.left {
// flex-grow: 1;
flex-shrink: 0;
width: 200px;
background:blue;
}
.right {
// flex-grow: 1;
flex-shrink: 0;
width: 200px;
background:green;
}
.middle {
// flex-grow: 1;
width: 100%;
flex-shrink: 1;
}
}
主要属性
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
参考: Flex 布局教程:语法篇