flex:1详解

fatpsm

已于 2022-08-05 11:16:47 修改

阅读量1.3k

点赞数

文章标签：前端 css javascript

于 2022-08-05 11:13:18 首次发布

本文链接：https://blog.csdn.net/fatpsm/article/details/126173807

版权

结论

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>