结论
flex:1即为flex-grow:1,经常用作自适应布局,将父容器的display:flex,侧边栏大小固定后,将内容区flex:1,内容区则会自动放大占满剩余空间。
可用于设置高度
height:100%;
flex-direction:column;
flex:1; //子元素
原理
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
flex-grow:定义项目的的放大比例;默认为0,即使存在剩余空间,也不会放大;
<div style="display:flex;border:1px solid #000;">
<div style="height:100px;background-color:gray;flex-grow:1;">1</div>
<div style="height:100px;background-color:red;flex-grow:1;">2</div>
<div style="height:100px;background-color:gray;flex-grow:1;">3</div>
</div>