网格与弹性框

介绍：

我们知道，如今 flex 和 grid 在布局设计中变得非常重要，以前通过设置位置、浮动等方式让布局按照我们想要的方式显示非常混乱。
现在 grid 和 flex 使得
flex 和 grid 共享相同的共同特征变得非常混乱，什么时候使用 flex，什么时候使用 grid，以及它们之间有什么区别。
所以在本文中，我们将解释这两个属性之间的区别。

差异：

1- 主要的重要区别在于：我们在一维布局（行或列）中使用 flex，而在二维布局（行和列）中使用 grid
例如：
Flex：
HTML： CSS：输出：在此示例中，我们可以看到 flex 有 2 行，但实际上只有一行，但元素超过父级宽度的 100%，因此它会分成另一行这种情况仅当我们将（flex-wrap：wrap;）添加到父元素时才会发生Grid： HTML： CSS：输出：在此网格示例中，我们实际上有两列和两行，因此这是一个二维布局

2-Grid 主要在父元素上定义，而 flexbox 大多数布局发生在子元素上：
例如：
Flex：
HTML： CSS：输出：

网格：
HTML： CSS：输出：

3- Flexbox 从内容向外工作，而 Grid 从布局向内工作：
Flexbox 从内容向外工作。Flexbox 的理想用例是您有一组项目并希望将它们均匀地分布在容器中。您可以让内容的大小决定每个项目占用多少单独空间。如果项目换行，它们将根据其大小和该行的可用空间计算出它们的间距。
当您使用 CSS 网格布局时，您可以创建一个布局，然后将项目放入其中，或者您允许自动放置规则根据严格的网格将项目放入网格单元中。可以创建响应内容大小的轨道，但是，它们也会改变整个轨道。

4. Flexbox 可以将元素推开，而 Grid 则不会：
Flexbox 的独特功能在于，例如，你可以在一个元素上设置 margin-right: auto; ，如果还有空间，该元素会将其他所有元素推到尽可能远的位置。而网格元素如果设置了 margin-right: auto; ，就无法将其他元素推开。例如
：
HTML： CSS：输出：

参考：

文章来源：https://dev.to/nadayousry/grid-vs-flexbox-3fbh