何时使用 Flexbox，何时使用 CSS Grid

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

作者：莱昂纳多·马尔多纳多✏️

内容的呈现方式能够体现您或您公司的很多信息。拥有优质的内容，并懂得如何以简洁易懂的方式恰当地展示内容，让用户轻松理解，这一点至关重要。

那么，我们如何选择内容的展示方式呢？美观得体的展示方式取决于我们的CSS代码。

CSS一直是Web开发中最重要的组成部分之一，自浏览器诞生以来，我们就一直在不断构建和改进它的各种使用方式。几年前，创建网页布局是一项非常艰巨的任务。我们当时使用一些CSS属性，例如`<div>`、`<span>`和` <div> float`来定位大量元素position，以及`<div>`和`<div>`等CSS属性。

现在，我们不再依赖这些属性来创建网页，创建不同的网页体验变得越来越容易。Web 的发展已经到了一个阶段，我们现在可以使用两种 CSS 布局系统：Flexbox和CSS Grid。

尽早考虑哪种布局系统最适合你的项目，确实有助于你获得更好的效果和编写出高质量的 CSS 代码。在本文中，我们将探讨何时使用 Flexbox，何时使用 CSS Grid。这虽然不是一个很难回答的问题，但它可以为你节省未来的维护和重构时间。

首先，我们需要了解它们的用途以及它们在底层是如何工作的，让我们从 Flexbox 开始。

Flexbox

Flexbox于 2009 年作为一种新的布局系统推出，旨在帮助我们构建响应式网页并轻松组织元素。自那时起，它便获得了越来越多的关注。如今，它已成为现代网页的主要布局系统。

Flexbox 是一种一维布局系统，我们可以用它来创建行或列轴布局。它让我们能够更轻松地设计和构建响应式网页，而无需使用复杂的技巧以及在 CSS 代码中大量使用浮动和定位属性。

要开始使用 Flexbox，您只需使用display: flex属性创建一个 flex 容器。之后，该 flex 容器内的每个元素都会变成一个 flex 项。

我们的弹性项目在弹性容器中的主要方向是成行排列。

我们可以通过向弹性容器传递一个属性，轻松地将弹性容器中的弹性项目的方向更改为列方向flex-direction: column。

Flexbox 还有许多其他属性，我们可以利用它们来创建很棒的效果。我们可以按所需方式排列元素，可以反转元素的顺序，可以决定元素是放大还是缩小等等。

例如，假设我们有一个div元素，该元素内部div有三个宽度和高度相同的子元素：

<div id="container">
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div>
</div>

在我们的 CSS 中，我们使用 Flexbox 来对元素进行排序和对齐：

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

我们可以使用属性轻松地反转元素的顺序order。如果我们想改变元素的顺序，可以这样做：idtwo

#two {
  order: 3;
}

现在，我们的元素是 Flexbox 容器中的最后一个元素。这些是 Flexbox 为我们引入的一些特性，它们对于元素的样式和对齐方式非常有用。

既然我们知道 Flexbox 是一个一维布局系统，那么让我们简要了解一下 CSS 网格的工作原理以及这些布局系统之间的区别。

CSS网格

如果说 Flexbox 是一个强大的布局系统，因为它是一个一维系统（意味着我们可以处理行或列），那么 CSS Grid 现在被认为是功能最强大的布局系统。

CSS 网格是一个二维布局系统，我们可以同时使用行和列，这意味着它为构建更复杂、更有条理的设计系统开辟了许多不同的可能性，而无需回到过去使用的某些“权宜之计”。

要定义网格容器，只需将一个display: grid属性传递给块元素即可。现在您已经有了网格，接下来需要定义所需的行数和列数。

要创建行，可以使用该grid-template-rows属性，并传入所需的行数，如下所示：

grid-template-rows: 200px 200px;

创建列的方法几乎相同，我们使用grid-template-columns属性：

grid-template-columns: 200px 200px;

但如果你已经知道如何使用这两种布局系统，你可能会想“我应该使用哪一个？”，接下来我们将探讨这个问题。

既然我们已经了解了它们的工作原理，接下来我们将重点介绍它们之间的区别以及各自的最佳应用场景。

CSS Grid 用于布局，Flexbox 用于对齐

Flexbox刚发布的时候，我们认为它可能是构建网页的最佳布局系统，但事实并非如此。

Flexbox 帮助开发者开始创建更具响应性和可维护性的 Web 应用程序，但当需要构建更复杂的布局设计时，一维布局系统的主要思想就失去了意义。

CSS Grid 的出现确实帮助我们以二维方式构建更复杂的布局设计，它结合了行和列两种布局方式。我们应该尝试将两者结合使用，但用途不同。布局方面，使用 CSS Grid；元素对齐方面，使用 Flexbox。

要掌握 CSS 网格布局，并准确了解何时需要以及如何使用，你应该首先学习基础知识以及 Flexbox 的工作原理，因为当你需要在应用程序中对齐元素时，你将使用 Flexbox。

在以下情况下，您应该考虑使用 Flexbox：

• 如果您需要实现一个小型设计  ——Flexbox 非常适合这种小型布局设计，例如只有几行或几列的布局。
• 你需要对齐元素  ——Flexbox 正好能满足这个需求，我们只需要创建一个 flex 容器display: flex，然后定义我们想要的 flex 方向即可。
• 你需要一个内容优先的设计 ——如果你不知道你的内容最终会是什么样子，Flexbox 是创建网页的理想布局系统；所以，如果你希望所有内容都能恰到好处地融入其中，Flexbox 就是完美的选择。

当然，你完全可以只用 Flexbox 构建整个应用程序，并获得与使用 CSS Grid 相同的效果，这完全没问题。但是，为了获得更好的 CSS 实现方案，打造更简洁、更易维护的应用程序，并完美地创建和适配你的布局，理想的方法是使用 CSS Grid。

CSS 网格系统在以下情况下效果更佳：

• 你需要实现一个复杂的设计  ——在某些情况下，我们确实需要实现复杂的设计，而这时 CSS Grid 的魔力就显现出来了。这种二维布局系统非常适合创建复杂的设计，我们可以利用它来创建更复杂、更易于维护的网页。
• 块级元素之间需要留有间距  ——CSS Grid 布局中另一个非常有用的功能（Flexbox 布局没有）就是 gap 属性。我们可以轻松地定义行或列之间的间距，而无需使用 margin 属性，因为 margin 属性在处理大量断点时可能会产生一些副作用。
• 你需要重叠元素  ——使用 CSS Grid 实现重叠元素非常简单，只需使用 `grid-column` 和 `grid-row` 属性即可轻松实现。另一方面，使用 Flexbox 时，我们仍然需要一些技巧，例如使用 `margin`、`transform` 或绝对定位。
• 你需要先设计布局 ——当你已经有了布局结构，使用 CSS 网格系统构建就更容易了。二维布局系统在我们能够同时使用行和列，并按照我们想要的方式定位元素时，能给我们带来很大的帮助。

在决定使用哪一个之前，请记住：

CSS Grid 用于布局，Flexbox 用于对齐

这里有一个正确使用 CSS 网格布局的例子。假设我们要构建一个简单的应用程序，应用程序的基本框架如下所示：

我们有页眉、侧边菜单、主要内容区和页脚。要使用 CSS 网格创建此布局，我们只需创建这些元素：

<div id="container">
  <header>Header</header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

现在，使用以下代码创建网格容器display: grid，然后创建一些行和列，如下所示：

#container {
  width: 100%;
  height: 100vh;
  background: yellow;
  display: grid;
  grid-template-rows: 80px 600px 80px;
  grid-template-columns: 0.5fr 1fr;
}

header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: blue;
}

aside {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: green;
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: pink;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background: yellow;
}

就是这样。我们仅使用 30 行 CSS 代码就轻松创建了我们的设计，无需使用诸如float定位元素之类的技巧，也无需创建许多弹性容器。

为了给你的应用程序创建一个非常体面且结构良好的网页布局，你能做的最佳决定就是将两者结合起来使用。

让我们以之前的例子为例，结合 CSS Grid 和 Flexbox 来展示这两种布局系统协同工作的强大功能。在我们的示例中header，我们将创建三个div元素，并将它们排列成一行。

为此，我们只需要header使用属性声明一个弹性容器display: flex，使用将弹性方向设置为行flex-direction: row，然后对齐项目即可。

header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: blue;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

这是一个功能强大的网页，使用 CSS 网格进行布局，使用 Flexbox 进行对齐。

对于主要的布局样式，可以使用 CSS Grid，因为它是一个二维布局系统，可以轻松地处理行和列。而对于更简单的布局样式，可以使用 Flexbox，这是一个一维布局系统，非常适合处理行。

结论

在本文中，我们了解了 Flexbox 和 CSS 网格之间的区别，它们在现代浏览器中的工作方式，以及如何使用它们在 CSS 中实现不同的结果。

你的前端是否占用了用户的大量CPU资源？

随着 Web 前端变得越来越复杂，资源消耗型功能也对浏览器提出了越来越高的要求。如果您希望监控和跟踪生产环境中所有用户的客户端 CPU 使用率、内存使用率等信息，不妨试试 LogRocket。

LogRocket就像 Web 应用的 DVR，记录 Web 应用或网站中发生的一切。您无需猜测问题原因，即可汇总并报告关键的前端性能指标，重现用户会话和应用状态，记录网络请求，并自动显示所有错误。

革新 Web 应用调试方式——立即开始免费监控。

这篇文章《何时使用 Flexbox，何时使用 CSS grid》最初发表于LogRocket 博客。