Question

疯狂地强调了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管理的基本领域？

编辑：对浏览器的支持并不重要（我只使用常绿的浏览器，并且可以根据需要进行切换）

Answer 1

优势Flexbox

Flexbox在Grid (Level 1)之前排在9个领域：

使包裹的物品居中。想象一下五个弹性物品。每行只有四个。第五卷。可以使用justify-content在整个行中轻松对齐第五行。尝试将第五项居中放置在网格容器中。这不是一件简单的事情。

Aligning grid items across the entire row/column (like flex items can)

包装。长度可变的Flex项目没有包装问题。尝试获取可变长度的网格项目以进行包装。不可能。

How to get grid items of different lengths to wrap?

自动边距。可以在整个容器中以auto边距放置，包装和分隔Flex项。但是，网格项目仅限于其轨迹，大大减少了auto边距的用途。

Can auto margins work in CSS Grid like they do in Flexbox?

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

Setting the minimum, maximum and default length of a grid column / row

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

How can I have a sticky footer with my CSS Grid layout?

消耗剩余空间。弹性项目可以用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?

How to make CSS Grid last row to take up remaining space

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

Shrink grid items just like flex items in css

在动态布局中限制列数。使用flexbox，创建一个环绕的两列网格，并在整个屏幕尺寸上固定为两列是没有问题的。在Grid中，尽管具有repeat()，auto-fill和minmax()之类的所有功能，但是它无法完成。

Make CSS Grid auto-fill only 2 columns

CSS grid max columns without media queries

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

Add space before and after first and last grid items

Answer 2

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失效吗？我不这么认为。

Answer 3

我可能应该指出Grid比Flexbox要新得多，因此实际上在某种程度上可以作为替代。就像Flexbox取代了float的典型用例（不是预期的用途）。

我首先要说这一点，我很少需要Grid的复杂性/功能，因此我在大多数情况下仍然使用Flexbox。

但是，根据我的经验，flex-wrap功能（尤其是屏幕尺寸可变的功能）是我认为Grid并不是很好的替代品的地方。

使用Grid很难或无法实现Flexbox涵盖的哪些领域？

3 个答案:

优势Flexbox