flex:1详解

原创已于 2022-08-05 11:16:47 修改 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #javascript

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

本文解释了flex:1属性在自适应布局中的应用，如何通过设置flex-grow为1让内容区域根据剩余空间动态调整。通过实例展示了如何使用并理解其原理，包括flex属性的组成和工作方式。

结论

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>