css flex:1

作者：◇∞柰旳ゝ僦湜沵发布日期:2025-03-11 浏览:307

.container {
  display: flex;
}

.item {
  flex: 1;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

display: flex;：将 .container 设置为一个弹性容器，其子元素（.item）将成为弹性项目。
flex: 1;：使每个 .item 元素占据相等的空间。具体来说，flex: 1 是 flex-grow: 1, flex-shrink: 1, 和 flex-basis: 0 的简写形式。这意味着所有具有 flex: 1 的子元素会均匀分配可用空间。

如果有任何问题或需要进一步的解释，请告诉我！