css flex:1是什么意思

作者：旭旭移日发布日期:2026-01-24 浏览:37

.container {
  display: flex;
}

.item {
  flex: 1;
}

display: flex;：将容器设置为弹性盒子布局（flexbox），使得子元素可以按照弹性模型进行排列。
flex: 1;：这是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。当设置为 1 时，表示该元素将会占据剩余的可用空间，并且在空间不足时会按比例缩小。如果多个元素都设置了 flex: 1，它们会平分剩余的空间。

因此，在上面的例子中，所有具有 .item 类的元素会平分 .container 容器中的可用空间。