CSS Flexbox，CSS网格有什么区别

Question

直到今天我知道他们正在做同样的事情，但他们不是。现在我想知道他们的主要区别是什么，我应该在哪里使用flex-box＆amp;如果你能给出两个小例子，那么gird.it会很精彩。

Answer 1

网格和 Flexbox

之间的差异

• Flexbox最适合一维布局（如行或列）
• CSS网格最适合2D布局（行和列）
• Flexbox One Dimension ex ：
• CSS Grid 2D ex：
• 网格可以做Flexbox无法做到的事情，Flexbox可以做网格无法做到的事情。
• 他们可以一起工作：网格项可以是 flexbox 容器。弹性项目可以是网格容器。

• 使用CSS Grid，我们可以水平和垂直设置关系，但同时也是如此。另一方面， Flexbox 会陷入垂直或水平布局。

  Further Read

Answer 2

Flexbox是一维的，并允许其所有直接子项（“弹性项目”）沿其主要定义的轴放置，如果尚未定义宽度，则上下文可能会发生变化。

然而，CSS网格被设计为二维布局系统：CSS网格可以处理列和行。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout