Grid 与 Flex：该如何选择？🤔

感谢阅读

也许您是CSS的初学者，并且想知道是否应该使用flex或grid进行布局，或者也许您听说过流行的说法，即使用flex进行1D 布局，grid使用 进行2D 布局，那么您来对地方了。

本文将向您展示flex和之间的区别grid以及何时使用哪个，以便您可以自信地为您的项目使用合适的一个！

揭穿谣言🎈📌

让我们首先揭穿关于1D和2D 布局的常见误解flex和grid限制。

我们将使用以下内容作为基础HTML：

<div class="container">
  <div>
    Lorem, ipsum.
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur.
  </div>
  <div>
    Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Facilis.
  </div>
  <div>
    Lorem ipsum dolor sit amet.
  </div>
  <div>
    Lorem ipsum dolor sit, amet consectetur
    adipisicing elit.
  </div>
  <div>
    Lorem, ipsum dolor.
  </div>
</div>

并添加以下CSS以使元素的边界可见：

.container {
  border: 1px solid #000;
}

.container > div {
  border: 1px solid #000;
}

这是我们得到的：

使用 Flex 进行 2D 布局

添加display: flexCSS​

.container {
  display: flex;
}

元素排列成一排。

向CSS中插入另一个属性

.container {
  display: flex;
  flex-wrap: wrap;
}

第一行无法容纳的元素会跳到下一行，并且flex可用于一维布局的神话只会落空。

带网格的一维布局

尽管添加到CSSdisplay: grid中不会改变任何事情，

.container {
  display: grid;
}

一旦我们添加grid-auto-flow: column，元素就会排成一行。

我们也揭穿了这个神话！

那么什么时候应该使用 flex 或 grid 呢？🤨

CSS grid 专注于精确的内容放置。每个项目都是一个grid单元格，沿水平轴和垂直轴排列。如果您想精确控制布局中项目的位置，CSS grid是您的最佳选择。

然而，flexbox它更注重内容流，而不是内容位置。flex项目的宽度（或高度）由项目的内容决定。Flex 项目会根据其内部内容和可用空间进行伸缩。

flex-wrap您可能已经注意到，元素仅占用它们所需的空间。

但情况并非如此grid。添加以下CSS：

.container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

我们发现，所有元素都具有相同的宽度，无论其内容如何。它们的高度也与特定行中的所有元素相同。

用例🎬

弹性盒子

理想的用例flexbox是当您想要显示不占用相同空间的项目时，例如在导航栏中。

网格

grid可以用于显示卡片之类的物品，其中每个元素应具有相等的间距。

它还可以用于创建砌体布局，其中项目以 的形式排列grid，但项目超出了单个行/列，这可以通过向子元素添加一些CSS属性来实现：

.grid-parent .child-2-by-2-tile {
  grid-column: span 2;
  grid-row: span 2;
}

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。