9. 弹性盒布局

Source: Dev.to

BootCamp by Dr. Angela

Display: Flex

/* example */
.container {
  display: flex;
  gap: 10px;
}

• 当 display: flex 生效时，所有子元素默认在同一行排列。
• Flex 布局会忽略子元素的传统显示类型（inline、block、inline‑block、none）。

inline-flex

• 行为类似于 inline-block。
• 容器本身表现为行内元素（例如 “）。
• 宽度会根据内容自适应（以最大的子项为准）。
• Flex 规则仍然适用于其子元素。

Flex Direction

• flex-direction 决定主轴和交叉轴的方向。

  • row（默认）：主轴 →，交叉轴 ↓
  • column：主轴 ↓，交叉轴 →
  • row-reverse / column-reverse：沿主轴的起点/终点顺序反转

• flex-basis

  • 定义单个 flex 项在主轴方向上的初始尺寸。
  • 只作用于 flex 项，而不是 flex 容器。
  • 在行方向上相当于 width，在列方向上相当于 height。

Flex Layout

• order: 0;（默认）作用于 flex 项；数值越大，项在主轴上出现得越靠后（在行中向右）。

Wrapping (flex-wrap – container)

• nowrap（默认）：所有项保持在同一行。
• wrap：项会换到多行。
• wrap-reverse：项会以相反方向换行。

Main‑axis alignment (justify-content)

flex-start | flex-end | center | space-between | space-around | space-evenly

Cross‑axis alignment (single line – align-items)

flex-start | flex-end | center | baseline | stretch

需要定义容器高度（例如 height: 70vh）。仅在项目未换行时生效。

Individual item alignment (align-self)

覆盖单个 flex 项的 align-items，使用相同的取值。

Cross‑axis alignment for multiple lines (align-content)

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

需要 flex-wrap: wrap;，用于控制多行（或多列）之间的间距。

Shorthand (flex-flow)

/* example */
flex-flow: row wrap;   /* equivalent to flex-direction: row; flex-wrap: wrap; */

Flex Sizing

尺寸优先级（低 → 高）：
内容尺寸 → width → flex-basis → min-width / max-width

Content‑based sizes

• min-content：基于最长单词的尺寸（最小可能宽度）。
• max-content：基于所有内容在同一行的尺寸（最大可能宽度）。

Flex Grow / Shrink

• flex-grow：控制在有剩余空间时项目的增长程度。
• flex-shrink：控制在空间不足时项目的收缩程度。
• 0：不增长也不收缩。

Flex shorthand

/* example */
flex: 1 1 0; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */

空间会根据 grow/shrink 的数值按比例分配。

Further Reading

• CSS‑Tricks Flexbox Guide
• Flexbox Froggy – Practice Game