flex: 1
是一种用于设置 flexbox 布局中项目的弹性伸缩比例的属性。
在 flexbox 布局中,父容器(flex container)可以设置 display: flex
或 display: inline-flex
来创建一个弹性容器,其中的子元素(flex items)可以通过 flex
属性来控制它们在父容器中的弹性伸缩行为。
当应用 flex: 1
属性于某个 flex item 时,它表示该元素将会根据可用空间来分配弹性伸缩比例。具体而言,当容器有多余空间时,flex: 1
的元素将会占据剩余空间的比例。如果多个子元素都具有 flex: 1
属性,它们将平均分配可用空间,即每个子元素占据相同的比例。
举个例子,假设一个容器包含了三个子元素,其中两个子元素的 flex
属性设置为 1
,而另一个子元素没有设置 flex
属性。那么,前两个子元素将会平均占据剩余空间的一半,而没有设置 flex
属性的子元素则会根据其内容大小进行布局。
总结起来,flex: 1
可以用于创建灵活的布局,让子元素根据可用空间的比例进行伸缩分配。