css flex布局中子元素的属性flex

1. flex 是 flex-grow、flex-shrink 和 flex-basis 的简写

语法格式：

flex: [flex-grow] [flex-shrink] [flex-basis];

各属性解析：

flex-grow: 子元素如何按比例分配父元素的 剩余空间。

• 默认值：0（即不分配剩余空间）。
• 如果设置为 1 或更大值，则子元素会根据此值按比例分配剩余空间。

flex-shrink: 子元素在父容器空间不足时如何按比例 收缩。

• 默认值：1（即允许收缩）。
• 设置为 0 时，子元素不会收缩。

flex-basis: 子元素在弹性布局中 初始宽度或高度的基准。

• 默认值：auto（即根据内容、width 或 height 等值决定）。
• 如果设置为具体数值（如 0px、100px 或百分比 0%、100%），则会覆盖 width 的设置。

---

2. 常见用法解析

单值写法

flex: 1;

等价于：

flex: 1 1 0%;

表示 flex-grow: 1，flex-shrink: 1，flex-basis: 0%（基准宽度为 0）。

三个值写法

flex: 2 0 100px;

表示

• flex-grow: 2：子元素会分配两倍的剩余空间（与其他子元素按比例）。
• flex-shrink: 0：子元素不会收缩。
• flex-basis: 100px：子元素的基准宽度为 100px。

常用缩写模式

flex: auto

• 等价于 flex: 1 1 auto。
• 子元素会按内容大小决定基础宽度（auto），允许增长和收缩。

flex: none

• 等价于 flex: 0 0 auto。
• 子元素大小完全由内容决定，不允许增长或收缩。

---

3. 应用场景

示例 1: 等比例分配剩余空间

<div class="container" style="display: flex;">
  <div class="box1" style="flex: 1;"></div> <!-- 占一份 -->
  <div class="box2" style="flex: 2;"></div> <!-- 占两份 -->
</div>

box1 和 box2 的行为

• 父元素有剩余空间，box1 占 1 份，box2 占 2 份，按照 1:2 分配。

示例 2: 固定宽度 + 自适应宽度

<div class="container" style="display: flex;">
  <div class="box1" style="flex: 0 0 100px;"></div> <!-- 固定宽度 100px -->
  <div class="box2" style="flex: 1;"></div>         <!-- 剩余空间填充 -->
</div>

box1 和 box2 的行为

• box1 宽度固定为 100px，不会增长或收缩。
• box2 自动填充剩余空间。

---

4. 注意点

1.flex-basis 优先级高于 width 或 height

如果同时设置了 width 和 flex-basis，flex-basis 会覆盖 width 的值。

2.默认值

如果未设置 flex，默认值为flex:0 1 auto

• 不增长（flex-grow: 0）。

• 允许收缩（flex-shrink: 1）。

• 基准宽度由内容决定（flex-basis: auto）。

3.父元素的 display: flex 必须设置：

• flex 属性对子元素生效的前提是父元素开启了 flex 布局。