优势Flexbox
以下是Flexbox在网格（第1级）之前领先的13个领域：
- 将包装好的物品居中。 想象一下五个伸缩项目。每行只有四个。第五卷。第五行可以很容易地与对齐
justify-content
。尝试将第五项居中放置在网格容器中。这不是一件简单的事情。
- 包装。 可变长度的柔性物品没有包装问题。尝试获取可变长度的网格项目以进行包装。不可能。
- 自动边距。 柔性物品可以在其整个容器中放置，包装和隔开一定距离
auto
。但是，网格项目仅限于其轨迹，从而大大减少了auto
边距的用途。
- 最小，最大，默认值–全部合为一体。 设置
min-width
，max-width
以及默认的width
柔性项目是很容易。如何在网格列或行上设置所有三个长度？他们不能。
- 粘性页脚/页眉。 用flexbox固定页脚或页眉非常简单容易。
- 消耗剩余空间。 一个flex项目可以消耗剩余空间
flex-grow
。网格项目没有这种功能。
- 收缩。 Flex有
flex-shrink
。网格什么都没有。
- 限制动态布局中的列数。 使用flexbox，创建一个环绕的两列网格，在整个屏幕尺寸上保持固定在两列是没有问题的。在电网，尽管有所有这些伟大的功能，例如
repeat()
，auto-fill
和minmax()
，它无法做到的。
- 在第一个项目和最后一个项目之间创建空间。 在具有可变列数的网格容器中，添加空的第一列和最后一列并不容易。边距，填充，列和伪元素都有其局限性。使用flexbox非常简单。
- 内联级容器的重要优点在某些情况下会丢失。 如果您具有带有动态列数的Grid布局（这意味着您无法设置容器的列数或宽度），那么
display: inline-grid
它将无法正常工作。所有项目都堆叠在一个列中。这是因为默认设置grid-auto-columns
为一列。在至某些情况下，flexbox可以解决该问题。
- 获取具有作者定义的网格区域的列以进行包装而无需媒体查询。 假设您有一个两列网格，其中包含已设置位置的网格区域，并且希望该网格在较小的屏幕上自动过渡到单列（第二列包裹在第一列的下方）。使用网格，您将需要媒体查询。在
auto-fill
和auto-fit
因为已经指定网格区域的位置功能将无法正常工作。如果要避免媒体查询，flexbox的flex-wrap
功能可能会很有用。
column-reverse
CSS Grid中没有任何功能。仅将一个规则应用于网格容器，就不可能从底部开始填充项目。但是，使用flexbox可以轻松完成任务flex-direction: column-reverse
。
resize
网格项目上的属性对轨迹没有影响。除非将列或行轨道设置为auto
（基于内容的大小），否则调整网格项的大小将使轨道溢出。由于flexbox没有列和行轨道，因此它可能是一个有用的选择。
