IQCaseCollection

InterviewQuestionBank 案例 Demo

← 返回列表

flex: 1

flex 是简写，完整三件套： flex-grow | flex-shrink | flex-basis。 下面逐项对照。

一句话拆开

flex-grow: 1

有剩余空间就跟着涨

flex-shrink: 1

空间不够就跟着缩

flex-basis: 0%

分配前基础宽度先按 0 算，再平分剩余空间

所以 flex: 1 ≈「先当自己是 0，再和其他 flex: 1 的兄弟把容器空间均分」。

1. flex-grow：有剩就涨

容器比内容宽时，多出来的空间按 grow 比例分。 0 不吃剩余空间；1 参与分配；2 分到的是 1 的两倍。

左边 grow: 0 · 右边 grow: 1
grow 0
grow 1 · 吃掉剩余
grow 1 : 2 : 1（按比例分剩余空间）
1
2
1

2. flex-shrink：不够就缩

容器变窄、装不下时，按 shrink 比例压缩。 0 宁肯溢出也不缩；1 会参与压缩。

容器偏窄 · 左 shrink: 0 · 右 shrink: 1
shrink 0 · 180px
shrink 1 · 被挤瘦

看右边绿块：基础也是 180px，但容器不够时它被压缩了，左边几乎不动。

3. flex-basis：分配前的「起跑线」

先按 basis 定初始主轴尺寸，再用 grow/shrink 调。 flex: 1 里的 0% 意思是：别按内容宽度起跑，大家都从 0 开始再均分。

basis: auto（按内容宽度起跑）
短
内容很长很长很长
basis: 0%（flex: 1 的常见行为，近似均分）
短
内容很长很长很长

上面两组都是 grow=1，但起跑线不同： auto 会先尊重内容宽度再分剩余； 0% 更接近「两栏均分」。

4. flex: 1 与展开写法对照

下面两行视觉应基本一致：上面写 flex: 1，下面写三项展开。

flex: 1
A
B
C
flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
A
B
C

对应代码

/* flex 是简写 */
flex: <grow> <shrink> <basis>;

/* flex: 1 一般等价于 */
.item {
  flex-grow: 1;    /* 有剩空间就跟着涨 */
  flex-shrink: 1;  /* 不够就跟着缩 */
  flex-basis: 0%;  /* 先按 0 算基础，再平分剩余空间 */
}

/* 常见对照 */
.a { flex: 1; }          /* 1 1 0% */
.b { flex: 2; }          /* 2 1 0%，分到的是 a 的两倍 */
.c { flex: 0 0 200px; }  /* 不涨不缩，固定 200px */