优势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没有列和行轨道，因此它可能是一个有用的选择。