迟迟没学会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 成本太高。

以上纯属我个人瞎歪歪，没有资料可以证明（因为我英语不好，要在一堆英文资料中找到能支撑我观点的证据，对我来说太难了），如有讲的不对，欢迎指出。