我先問 2 個問題：

1. 你是不是用主軸-交叉軸/輔軸/副軸的概念理解 flex
2. 你是不是也用這個概念去理解 grid

如果你是用這種方式理解的 flex，那聽我慢慢道來

今天我打破你對 flex 的理解

打碎對 flex 理解

display: grid 和 display: flex 默認方向都是 row，為什麼他們表現出來的形式不一樣呢？

display: flex： 效果

display: grid： 效果

這也是很多人在熟練使用 flex 之後，轉用 grid 後遇到的最大問題（其實説的就是我自己，手動狗頭）。

對於 flex 佈局來説，使用最多的屬性是 justify-content 和 align-items。

justify-content 控制着主軸方向的佈局，align-items 控制交叉軸（也叫側軸，還有説叫做輔軸？副軸？）方向的佈局。

對於 justify-content 控制的方向叫做主軸方向，大家都比較統一，對於 align-items 控制的方向叫什麼，大家對它的理解就不太一樣了，MDN 中叫做交叉軸或者側軸，阮一峯和張鑫旭的博文中使用的是交叉軸，至於輔軸或副軸的翻譯更多存在於和我一樣的前端開發者寫的博文中。下文對於 align-items 統一使用交叉軸的翻譯。

我不知道其他人是不是和我理解的一樣，我當時剛接觸 flex，理解了主軸之後，剩下的那個自然就是副軸，或者輔軸嘍。

畢竟交叉軸或者側軸這樣的翻譯實在不好理解，而主 - 副/輔從字面上一下就能理解了，然後就學會了 flex 佈局方案，一直愉快使用到現在。

如果只使用 flex 佈局，這樣理解沒啥問題。直到有一天，你去使用 grid 佈局，你會發現，為什麼都有 justify-content、align-items，但表現出來的效果完全不一樣？然後吐槽一句：grid 佈局真難用，一樣的屬性卻是不同的用途。

現在 grid 佈局遲遲沒有流行，一方面説是兼容性問題，但時間已經到了 2022 年，主流瀏覽器大部分都已經支持了。所以就像張鑫旭大佬在兩年前説的：“強雖然強，但是學起來累啊，我並不看好日後的普及。”

為什麼 grid 佈局學起來累，用 flex 的概念去理解 grid ，學起來肯定累啊，flex 的概念是什麼，就是上面説的：主軸-交叉軸

grid 是網格佈局，也就沒有這概念，特別是還使用輔軸和副軸來理解的開發者，用 grid 簡直是噩夢。

建立正確的理解方式，適用於 flex 和 grid

要理解 grid， 首先就要拋棄對 flex 的理解，也就是説不要在使用主軸-交叉軸的概念（貌似有點逆天下之大不違），先聽我慢慢説。

對於 flex 來説，控制方向的屬性是 flex-direction，默認是 row。

通過控制枱可以看到，flex 是將頁面垂直分成了 3 列，水平是 1 行。

對於 grid 佈局來説，控制方向的屬性是 grid-auto-flow，默認是 row。

通過控制枱看到，grid 是將頁面水平分成了 3 行，垂直分成了 1 列。

要講清楚這個問題，先回到 items 和 content 上面。

items 和 content 的意思

有沒有想過為什麼 item 加了 s，content 沒有加 s？

從字面翻譯就是項和內容的意思，也就是説 item 代表着行和列，多個行列就組成了網格，content 是每個網格中的內容。

所以 items 就代表着多個網格。

也就是説：

• align-items 和 justify-items 控制的是網格排列方式
• align-content 和 justify-content 控制的是網格中的內容排列方式。

正確理解 flex 和 grid 的方式

為什麼 flex 佈局用 align-items 和 justify-content，不用 justify-items。

重點來了：

• 用 flex 佈局的那個 div（容器），把它看成一個網格

  • 也就是説，flex 內部的直接子元素都是 content

• 用 grid 佈局的那個 div（容器），把它看成多個網格，具體是幾個網格，要看 grid-template-columns 和 grid-template-rows 的值。

  • 也就是説，grid 內部的直接子元素都是 item

所以你現在能理解 flex 佈局，為什麼用 justify-content 而不是用 justify-items 了嗎？

因為 flex 佈局靠 align-items 就能控制這一個網格的排列方式了，justify-content 用來控制網格中的內容就行了。

其實從 items 和 content 的取值就能看出來了他們的區別了

• items 取值：start/center/end 等
• content 取值：space-between/space-around 等

flex-direction 和 grid-auto-flow 理解

從這兩個取值來看：row 和 column，很容易把它們理解成佈局方向。

實際上要在佈局方向上加上一個主語，也就是 xx 的佈局方向

• flex-direction 控制的是 content 排列方式

  • row：content 水平排列
  • column：content垂直排列

• grid-auto-flow 控制的是 item 的排列方式

  • row：item 先行後列
  • column：item 先列後行

糾錯

有一種關於 flex 和 grid 使用場景的解釋：

• flex：做二維佈局
• grid：做三維佈局

不知道是誰提出了這種觀點，這個觀點簡直害人！！

首先什麼是三維？

三維是立體吧？

grid 佈局有涉及到立體嗎？

沒有吧？

那能叫做三維佈局嗎？

當有個概念無法用中文詞語表達準確時，首先不能用錯誤的詞語去表達吧！

最後

我就是受主軸-輔軸影響，遲遲沒有學會 grid 佈局。

這種理解方式確實幫助了初學者理解 flex 佈局工作的原理，flex 的流行它功不可沒。

但我們也得看到這種思想背後存在的問題，導致理解 grid 成本太高。

以上純屬我個人瞎歪歪，沒有資料可以證明（因為我英語不好，要在一堆英文資料中找到能支撐我觀點的證據，對我來説太難了），如有講的不對，歡迎指出。