Flexbox 沒(méi)壞。

壞的是我們常用它的方式。

你“打過(guò)的那些 Flexbug”，多數(shù)根本不是 bug：

是父子在說(shuō)不同的語(yǔ)言；

是margin 在假扮布局規(guī)則； 是**flex: 1 到處亂抹**卻沒(méi)計(jì)劃。

別再和 Flexbox 打架。按它的系統(tǒng)思維來(lái)用它。

下面這 7 個(gè)簡(jiǎn)單技巧，能讓你的布局穩(wěn)、簡(jiǎn)、好維護(hù)。

1.讓父容器定規(guī)矩

父級(jí)掌控方向、間距、換行； 子項(xiàng)只關(guān)注可伸縮性。

.container {
  display: flex;
  flex-direction: row; /* or column */
  gap: 16px;
  flex-wrap: wrap;     /* 需要多行時(shí)再加 */
}

把布局決策留在容器上。

別讓一堆子項(xiàng)在 15 個(gè)選擇器里互相搶地盤(pán)。

2.用 gap，不是 margin，來(lái)控兄弟間距

gap 是真正的兄弟間距： 兼容換行，沒(méi)有最后一項(xiàng)留白等詭異問(wèn)題。

.container {
  display: flex;
  gap: 12px; /* 行列都適用，wrap 也正常 */
}

原則：組件內(nèi)部用 margin 調(diào)內(nèi)間距；兄弟之間用 gap 調(diào)外間距。

3.管住 Flex 三件套：grow / shrink / basis

flex 不是“變靈活”的開(kāi)關(guān)，而是三個(gè)決定：

.item { flex: 2 1 240px; } /* grow | shrink | basis */

• grow：分配多余空間的“份額”
• shrink：擁擠時(shí)愿意“讓出”的比例
• basis：理想起始尺寸

常用范式：

/* 固定尺寸磁貼 */
.tile   { flex: 0 0 200px; }

/* 內(nèi)容優(yōu)先的按鈕：可略縮、別被壓扁 */
.button { flex: 0 1 auto; min-width: 10ch; }

/* 卡片柵格：起步 ~260px，能長(zhǎng)能縮 */
.card   { flex: 1 1 260px; }

現(xiàn)象排查：

卡片把一整行吃滿？→ grow 太大。

按鈕字被擠到不可讀？→ shrink 太激進(jìn) 或缺 min-width。

4.居中的穩(wěn)妥姿勢(shì)

居中=父級(jí)兩個(gè)屬性，只對(duì)直接子元素生效：

.center {
  display: flex;
  justify-content: center; /* 主軸 */
  align-items: center;     /* 交叉軸 */
}

要居中的元素更深一層？

要么讓它的直接父級(jí)也 display: flex；

要么在自身內(nèi)部建一個(gè)小型 flex 布局。

5.讓個(gè)別子項(xiàng)“破例”，別亂加包裹層

真實(shí) UI 常有“離群值”。 先試 margin-left: auto 和 align-self，別動(dòng)不動(dòng)套 div。

.row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.row .spacer {
  margin-left: auto;      /* 把后面的項(xiàng)推到最右 */
}

.row .note {
  align-self: flex-end;   /* 單個(gè)子項(xiàng)脫離行內(nèi)基線 */
}

6.用 wrap 搭 流式網(wǎng)格（多半不用 CSS Grid 框架）

一行可換行，再配一個(gè)“聰明”的 basis，基本夠了。

.grid { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 16px; 
}

.card { 
  flex: 1 1 260px;   /* 以 ~260px 起步，能長(zhǎng)能縮 */
  min-width: 220px;  /* 防止丑陋擠壓 */
  max-width: 420px;  /* 讓行寬可讀 */
}

寬屏多卡片；平板減少；手機(jī) 1–2 張。需要精確列數(shù)時(shí)，加一個(gè)斷點(diǎn)微調(diào) basis 即可。

7.不用黑科技也能做等高列

Flexbox 會(huì)讓兄弟在交叉軸上自然拉齊高度。

.columns {
  display: flex;
  align-items: stretch; /* 默認(rèn)就是它，顯式更清晰 */
  gap: 20px;
}

文案長(zhǎng)短不齊的卡片也能頂齊底齊， 按鈕與頁(yè)腳自然對(duì)齊，無(wú)需 JS。

發(fā)版前的快檢清單

• ? 父級(jí)是否在管 方向 / 間距 / 換行？
• ? 兄弟間距是否用 gap 而非 margin？
• ? 每個(gè)子項(xiàng)是否有意識(shí)地設(shè)置 flex: grow shrink basis，并配合 min/max-width？
• ? “離群值”是否用 **margin-left: auto / align-self**，而不是加無(wú)用包裹層？
• ? 換行后的行列，在幾種常見(jiàn)視口寬度下是否自然？
• ? 當(dāng)一維主導(dǎo)時(shí)用 Flexbox，雙軸同時(shí)設(shè)計(jì)時(shí)交給 CSS Grid？

把 Flexbox 當(dāng)作一次清晰的協(xié)商：父制定規(guī)則，子按職責(zé)合作。

規(guī)則設(shè)一次；給每個(gè)子項(xiàng)明確意圖；讓布局自然呼吸。 你的 CSS 會(huì)更干凈、更自適應(yīng)、也不再像補(bǔ)丁亂堆。