关于css:迟迟没学会grid是因为你没理解flex

我先问 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 老本太高。

以上纯属我集体瞎歪歪，没有材料能够证实（因为我英语不好，要在一堆英文材料中找到能撑持我观点的证据，对我来说太难了），如有讲的不对，欢送指出。