【CSS】flex: 1； 的意思

在 Flexbox 布局中，flex: 1; 是一个简写属性，它表示弹性容器中的子元素如何分配可用空间。flex: 1 意味着该元素可以根据剩余的空间进行扩展，占据相应的比例。具体来说，flex: 1; 是 flex-grow、flex-shrink 和 flex-basis 这三个属性的简写：

flex: 1; /* 等同于 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

1. flex-grow: 1

• 表示元素可以根据可用空间进行扩展，1 表示该元素在可用空间中的比例。如果父容器有剩余空间，设置了 flex-grow: 1 的元素会平分这些空间。
• 如果有多个元素设置了 flex-grow，它们将按指定的比例共享可用空间。

2. flex-shrink: 1

• 表示当父容器空间不足时，元素是否可以缩小。1 表示该元素可以按比例缩小。
• 如果多个元素都设置了 flex-shrink: 1，当空间不足时，它们会按比例缩小。

3. flex-basis: 0

• 表示元素在伸展或缩小之前的初始大小。0 意味着元素的初始大小为 0，并且完全依赖 flex-grow 的值来决定最终的大小。

示例：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

<style>
  .container {
    display: flex;
  }
  .box {
    flex: 1;
    background-color: #f0f0f0;
    padding: 20px;
    margin: 5px;
  }
</style>

解释：

• 在这个例子中，.box 元素都设置了 flex: 1;，这意味着它们会均等分配父容器的可用空间。
• 如果容器有多余的空间，三个 box 会平分这些空间。如果父容器的空间不足，它们也会等比例地缩小。

总结：

• flex: 1; 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 的简写。
• 它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。