Flexbox覆盖的区域，使用网格很难或不可能实现

Question

突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是

但您也可能会争辩说，像这样的纯一维布局在Flexbox中更为强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。

我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，…）通过框架进行管理。
我还没有发现Grid无法立即替换Flexbox的情况 （即没有高级CSS 技巧 或很多代码）。

以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。

Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？

编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）

Answer 1

优势Flexbox

以下是Flexbox在网格（第1级）之前领先的13个领域：

1. 将包装好的物品居中。 想象一下五个伸缩项目。每行只有四个。第五卷。第五行可以很容易地与对齐justify-content。尝试将第五项居中放置在网格容器中。这不是一件简单的事情。

1. 包装。 可变长度的柔性物品没有包装问题。尝试获取可变长度的网格项目以进行包装。不可能。

1. 自动边距。 柔性物品可以在其整个容器中放置，包装和隔开一定距离auto。但是，网格项目仅限于其轨迹，从而大大减少了auto边距的用途。

1. 最小，最大，默认值–全部合为一体。 设置min-width，max-width以及默认的width柔性项目是很容易。如何在网格列或行上设置所有三个长度？他们不能。

1. 粘性页脚/页眉。 用flexbox固定页脚或页眉非常简单容易。

1. 消耗剩余空间。 一个flex项目可以消耗剩余空间flex-grow。网格项目没有这种功能。

1. 收缩。 Flex有flex-shrink。网格什么都没有。

1. 限制动态布局中的列数。 使用flexbox，创建一个环绕的两列网格，在整个屏幕尺寸上保持固定在两列是没有问题的。在电网，尽管有所有这些伟大的功能，例如repeat()，auto-fill和minmax()，它无法做到的。

1. 在第一个项目和最后一个项目之间创建空间。 在具有可变列数的网格容器中，添加空的第一列和最后一列并不容易。边距，填充，列和伪元素都有其局限性。使用flexbox非常简单。

1. 内联级容器的重要优点在某些情况下会丢失。 如果您具有带有动态列数的Grid布局（这意味着您无法设置容器的列数或宽度），那么display: inline-grid它将无法正常工作。所有项目都堆叠在一个列中。这是因为默认设置grid-auto-columns为一列。在至某些情况下，flexbox可以解决该问题。

1. 获取具有作者定义的网格区域的列以进行包装而无需媒体查询。 假设您有一个两列网格，其中包含已设置位置的网格区域，并且希望该网格在较小的屏幕上自动过渡到单列（第二列包裹在第一列的下方）。使用网格，您将需要媒体查询。在auto-fill和auto-fit因为已经指定网格区域的位置功能将无法正常工作。如果要避免媒体查询，flexbox的flex-wrap功能可能会很有用。

1. column-reverse CSS Grid中没有任何功能。仅将一个规则应用于网格容器，就不可能从底部开始填充项目。但是，使用flexbox可以轻松完成任务flex-direction: column-reverse。

1. resize 网格项目上的属性对轨迹没有影响。除非将列或行轨道设置为auto（基于内容的大小），否则调整网格项的大小将使轨道溢出。由于flexbox没有列和行轨道，因此它可能是一个有用的选择。