使用Grid很难或不可能实现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）之前领先的10个领域：

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

   在整个行/列中对齐网格项目（就像弹性项目一样）

   如何在CSS网格的最后一行居中放置元素？

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

   如何获取不同长度的网格项进行包装？

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

   自动边距能否像在Flexbox中一样在CSS Grid中工作？

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

   设置网格列/行的最小，最大和默认长度

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

   如何在CSS Grid布局中添加页脚？

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

   使网格项目使用带有flex-grow的flex项目之类的剩余空间：1

   如何使最后一行中的项目消耗CSS网格中的剩余空间？

   如何使CSS Grid的最后一行占用剩余空间

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

   缩小网格项，就像CSS中的flex项一样

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

   使CSS Grid仅自动填充2列

   没有媒体查询的CSS网格最大列

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

   在第一个和最后一个网格项之前和之后添加空间

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

    如何使网格容器收缩以适合内容？

Answer 2

Flexbox and CSS grid are two different features and I don't agree about saying that one can replace another or that CSS grid is a superset of flexbox.

You said:

I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox.

Here is a basic flexbox example that involve wrapping that you cannot achieve (or probably difficult to achieve) using CSS grid. Reduce the window size and see how the elements will behave.

.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>

This is a 1-D layout where each line may have elements resized differently depending on the free space without being inside a 2-D grid. It will be difficult to achieve the same output using CSS-grid.

Basically flexbox is more suited when it comes to multiline/multirow content following one direction whereas CSS grid is more about a Grid with row and columns. Of course, when it comes to only one line a 2D grid can be considerd as 1D thus flexbox and CSS grid may achieve the same thing.

It's like comparing a table with only one tr and multiple td with a set of inline-block element inside one line BUT when it comes to wrapping and multiple tr it's clear that table and inline-block are different.

Worth to note that you can achieve what you want using any techniques in general. In the past, Flexbox wasn't there and developers were able to build layout using float (Boostrap is the best example). Then flexbox come with more powerful features to make things easier. Same thing for CSS grid and for future features.

Here is an example : https://drafts.csswg.org/css-align-3/

This Draft is talking about a future enhancement of alignment where we can consider jutify-content, align-items, etc without even using flexbox or CSS grid but directly on block elements.

If implemented, will this make Flexbox and CSS Grid useless? I don't think so.