疯狂地强调了Flexbox适用于1-D，而Grid适用于2-D，但我还没有找到清楚的解释，为什么不能将Grid用于1-D并取代Flexbox。 closest I came to是
但是您也可能会争辩说，像这样的纯粹一维布局更有效 在Flexbox中功能强大，因为Flexbox允许我们移动这些元素 周围更容易（例如，将它们全部移到一侧或另一侧，更改其 命令，将它们均匀地隔开，等等）。
我使用Grid和Flexbox进行基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。 我还没有发现Grid无法立即替换Flexbox的情况（那是没有高级CSS技巧或大量代码的情况）。
以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。
Flexbox涵盖哪些难以或无法使用Grid管理的基本领域？
编辑：对浏览器的支持并不重要（我只使用常绿的浏览器，并且可以根据需要进行切换）
答案 0 :(得分：7)
Flexbox在Grid (Level 1)之前排在9个领域：
使包裹的物品居中。想象一下五个弹性物品。每行只有四个。第五卷。可以使用justify-content在整个行中轻松对齐第五行。尝试将第五项居中放置在网格容器中。这不是一件简单的事情。
Aligning grid items across the entire row/column (like flex items can)
包装。长度可变的Flex项目没有包装问题。尝试获取可变长度的网格项目以进行包装。不可能。
自动边距。可以在整个容器中以auto边距放置，包装和分隔Flex项。但是，网格项目仅限于其轨迹，大大减少了auto边距的用途。
最小，最大，默认值–全部合一。设置弹性项目的min-width，max-width和默认值width很容易。如何在网格列或行上设置所有三个长度？他们不能。
Setting the minimum, maximum and default length of a grid column / row
粘性页脚/页眉。使用flexbox固定页脚或页眉非常简单，容易。
消耗剩余空间。弹性项目可以用flex-grow消耗剩余空间。网格项没有此功能。
Make grid item use remaining space like flex item with flex-grow: 1
How to make the items in the last row consume remaining space in CSS Grid?
收缩。 Flex具有flex-shrink。网格什么都没有。
在动态布局中限制列数。使用flexbox，创建一个环绕的两列网格，并在整个屏幕尺寸上固定为两列是没有问题的。在Grid中，尽管具有repeat()，auto-fill和minmax()之类的所有功能，但是它无法完成。
在第一和最后一项之间创建空间。在具有可变列数的网格容器中，添加空的第一和最后一列并不容易。边距，填充，列和伪元素都有其局限性。使用flexbox非常简单。
答案 1 :(得分：4)
Flexbox和CSS网格是两个不同的功能，我不同意说一个可以替代另一个，或者CSS网格是flexbox的超集。
您说：
我还没有找到清楚的解释，为什么不能将Grid用于1-D并替换Flexbox。
这是一个基本的flexbox示例，涉及包装，您无法使用CSS网格来实现（或可能难以实现）。减小窗口大小，然后查看元素的行为。
.box {
display: flex;
flex-wrap: wrap;
}
.box>span {
border: 1px solid;
padding: 10px;
flex-grow: 1;
}<div class="box">
<span>some text very long here some text very long here </span>
<span>text here</span>
<span>A</span>
<span>B</span>
</div>
这是一维布局，其中每行的元素大小可能会根据可用空间而有所不同，而不会位于二维网格内。使用CSS网格将很难获得相同的输出。
基本上，flexbox更适合用于遵循一个方向的多行/多行内容，而CSS网格更多地是关于具有行和列的网格。当然，仅涉及一行时，可以将2D网格视为1D，因此flexbox和CSS网格可以实现相同的目的。
这就像比较一张表，其中仅包含一个tr和多个td，并且在换行时要在一行BUT中包含一组inline-block元素并将多个tr进行比较清除表和inline-block是不同的。
需要注意的是，通常可以使用任何技术来实现所需的功能。过去，Flexbox不存在，开发人员可以使用float构建布局（最好的示例是Boostrap）。然后，flexbox具有更强大的功能，使事情变得更容易。 CSS网格和未来功能也是如此。
这里是一个示例：https://drafts.csswg.org/css-align-3/
本草案讨论的是将来对对齐的增强，我们甚至可以在不使用flexbox或CSS网格的情况下直接考虑在块元素上考虑jutify-content，align-items等。
如果实施，这会使Flexbox和CSS Grid失效吗？我不这么认为。
答案 2 :(得分：1)
我可能应该指出Grid比Flexbox要新得多，因此实际上在某种程度上可以作为替代。就像Flexbox取代了float的典型用例（不是预期的用途）。
我首先要说这一点，我很少需要Grid的复杂性/功能，因此我在大多数情况下仍然使用Flexbox。
但是，根据我的经验，flex-wrap功能（尤其是屏幕尺寸可变的功能）是我认为Grid并不是很好的替代品的地方。