为什么显示弹性和显示网格位置不同？

Question

好的，所以当你显示 flex 时，默认是一行，它是从左到右的主轴，然后列是从上到下的交叉轴，但是当你显示网格时，行通常是从上到下从左到右到底部和列。为什么方向不同，我很困惑哪个是行和列，flex 和 grid 的方向不应该是相同的吗？

Answer 1

对于 flexbox，方向默认为row

flex-direction 属性通过设置 flex 容器主轴的方向来指定 flex 项目如何放置在 flex 容器中。这决定了弹性项目的布局方向。

首字母：行^ref

对于 CSS 网格，流也是row，但放置算法不同：

首字母：行

自动放置算法通过依次填充每一行来放置项目，根据需要添加新行。

诀窍在于添加新行。默认情况下，我们没有行也没有列，每个轴只有一条网格线。

如果这些属性没有定义任何显式轨迹显式网格仍然在每个轴上包含一条网格线。 ^ref

因此，浏览器将为每个项目创建一个新行，您将拥有从上到下的布局。

如果您将流更改为列，您将有相反的行为

列

自动放置算法通过依次填充每一列来放置项目，根据需要添加新列。

---

flexbox 和 CSS 网格的行为相同，但不同之处在于，在 CSS 网格中您需要定义列，如果您不这样做，浏览器将假定一列并将元素从左到右然后从上到下放置将仅被视为自上而下。 Flexbox 放置项目时考虑了可用空间并且没有列的概念。列布局的逻辑相同。