flex-grow、flex-shrink 和 flex-basis 如何工作？

Question

IT Interview Practice · Accepted Answer

这三个 **flex items** 上的属性控制它们如何沿主轴共享空间。Shorthand `flex` 将它们合并在一起。

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## 每个属性的说明

- **`flex-basis`** — 项目的理想/初始主轴尺寸（对于行来说像 `width`）。`auto` 使用内容尺寸。
- **`flex-grow`** — 如果有*额外*空间，这个项目扩展的贪心程度。`0` = 不增长；更高的数字按比例增长。
- **`flex-shrink`** — 如果空间*不足*，这个项目收缩的程度。`0` = 永远不收缩（可能导致溢出）；默认 `1` = 按需收缩。

## 按比例增长

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

额外空间按增长值的比例分配，而不是绝对尺寸。

## 常见的 shorthand 值

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1` 在每个项目上创建相等的列；`flex: 0 0 250px` 创建一个刚性固定宽度面板，旁边是灵活的面板。

## 真实布局：固定侧边栏 + 流体内容

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## 为什么这很重要

这些属性是你在 flex 布局中控制比例尺寸的方式——相等列（`flex: 1`）、固定加流体面板（`flex: 0 0 X` + `flex: 1`）和防止不必要的收缩（`flex-shrink: 0`）。

理解 basis/grow/shrink 将 Flexbox 从

每个属性的说明

按比例增长

常见的 shorthand 值

真实布局：固定侧边栏 + 流体内容

为什么这很重要

相关问题