Flexbox和Grid有什么区别？

flexbox和grid（网格）之间有很多相似之处，首先是它们用于布局，并且比之前的任何布局技术都强大得多。它们可以拉伸和收缩，它们可以使DIV居中，它们可以重新排序，它们可以对齐物体......有很多布局情况可以使用任何一种来做我们需要做的事情，以及很多情况哪一个比另一个更适合。让我们关注差异而不是相似之处：

Flexbox可以选择包装。 如果我们允许flex容器换行，当flex项填充一行时，它们将换行到另一行。 它们在下一行的排列位置与第一行排列情况无关，因此看起来像砌体。 Grid（网格）也可以选择性地进行包装(如果我们允许自动填充的话)，因为条目可以填充一行并移动到新行(或者自动放置它们自己)，但是当它们这样做时，它们将沿着所有其他元素所做的相同网格线。

【注：Flexbox位于顶部，Grid（网格）位于底部】

可以将flexbox看作是“一维”的

虽然flexbox可以使行和列具有允许元素换行的意义，但却无法声明式控制元素的最终位置，因为元素只是沿着单个轴前进，然后相应的换行或不换行。如果你愿意的话，他们会像沿着一维平面那样做，因为只有一维，我们才能有选择地做一些事情，比如在基线上对齐元素——这是网格无法做到的。例如下面css，元素在一行中尽可能地移动，然后根据需要进行换行

.parent {
  display: flex;
  flex-flow: row wrap;
}复制代码

可以将Grid（网格）视为“二维”的

因为我们可以（如果我们想）声明行和列的大小，然后根据我们的选择显式地将事物放入行和列中

.parent {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 200px auto 100px; 
  grid-template-areas:
    "header header header"
    "main . sidebar"
    "footer footer footer";
}

.child-1 {
  grid-area: header;
}

.child-2 {
  grid-area: main;
}

.child-3 {
  grid-area: sidebar;
}

.child-4 {
  grid-area: footer;
}
复制代码

【注：Flexbox位于顶部，Grid（网格）位于底部】

Grid（网格）主要在父元素上定义。在flexbox中，大多数布局（超出基础）都发生在子元素身上。

.flexbox {
  display: flex;
  > div {
    &:nth-child(1) { 
      flex: 0 0 100px;
    }
    &:nth-child(2) { 
      flex: 1;
      max-width: 500px;
    }
    &:nth-child(3) { 
      flex: 0 0 50px;
      margin-left: auto;
    }
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr;
  grid-template-rows: 100px repeat(3, auto) 100px;
  grid-gap: 10px;
}
复制代码

网格在重叠时更好，在flexbox中获取要重叠的元素需要查看传统的东西，例如负边距，变换或绝对定位，以便打破弹性行为。使用Grid（网格），我们可以将项目放置在重叠的网格线上，甚至可以放在相同的网格单元格中

【注：Flexbox位于顶部，Grid（网格）位于底部】

最后总结

Grid（网格）是坚固。 虽然flexbox的灵活性有时是它的优势，但flex项目的大小变得相当复杂。 它是width、min-width、max-width、flex- base、flex-grow和flex-shrink的组合，更不用说其中的内容和空白等内容，以及同一行中的其他项。 Grid具有有趣的占位特性，比如小数单位，以及内容分解网格的能力，但是，一般来说，我们正在设置网格线，并在其中放置项目，这些项目可以在适当的位置进行处理。

Flexbox可以推动盒子的发展。这是flexbox的一个非常独特的功能，你可以把它放在右边的空白位置:auto;在一个元素上，如果有空间，这个元素会把其他的东西推到尽可能远的地方。