一、什么是flex:1
?
在CSS弹性布局中,flex: 1
用于定义弹性容器(flex container)内子元素的弹性属性,通常与父容器上的display: flex
或display: inline-flex
一起使用。flex:1是一个简写方式,相当于flex-grow
、flex-shrink
和flex-basis
的组合。
当使用flex: 1
时,它等同于设置了flex: 1 1 0。
-
flex-grow: 1
:
子元素在弹性容器内可以伸展的比例。值为1意味着它将占据所有可用空间,这意味着所有具有flex: 1 1 0
的子元素将以相同的速度增长,填充容器的剩余空间,值为0意味着它不会伸展。 -
flex-shrink: 1
:
子元素在弹性容器内可以收缩的比例。如果设置为1,表示它将与其他子元素按比例收缩,以适应容器中的空间压缩。如果设置为0,它将不会收缩。在出现空间不足的情况下,所有具有flex: 1 1 0
的子元素将以相同的速度收缩,避免内容溢出容器。 -
flex-basis: 0
:
子元素在分配可用空间之前的初始大小。设置为0
表示子元素在分配可用空间时没有初始大小,它们将根据剩余的空间进行分配。它可以设置为特定长度值(例如像素或百分比),或者设置为auto
,表示大小将基于元素的内容。
二、flex: 1 1 0
的神奇之处(优点)
设置为flex: 1 1 0
的子元素会在弹性容器内平均分配可用空间,而且当空间不足时,它们也不会收缩,保证了容器内元素的公平布局,并且在内容超出容器时不会出现溢出。这种设置在实现响应式设计时非常有用,让子元素自动填充剩余空间,特别是当你想要使用弹性布局实现响应式设计,让元素自适应容器大小时,flex: 1 1 0
是一个常见的选择。使得页面在不同屏幕尺寸下都能呈现出最佳效果。
参考资料: