Flexbox 与 CSS Grid 两者之间有什么区别，我们应该如何使用它们？

英文 | https://betterprogramming.pub/flexbox-vs-css-grid-3e9011ee2951

翻译 | 杨小爱

刚开始编程时，我只知道如何使用 flexbox。所以很自然地，我只使用了 flexbox。我从不认为 flexbox 比 CSS grid 更好或更差，我只是从未学会如何正确使用它。

当我开始在工作中承担更多责任后，我意识到 flexbox 可能并不总是每个项目的首选答案。它妨碍了我正在构建的不同布局，并且造成的麻烦超出了它的价值。

因此，在这里，我想于您分享我对它们的一些理解，希望对您有帮助。

现在，我们开始吧。

Flexbox

Flexbox 是一维的，这意味着你真的只能在一个方向或另一个方向设计你的页面。它并非旨在同时支持行和列。

我通常与 Flexbox 一起使用的主要属性是 display、flex-direction、align-items 和 justify-content。我建议查看 MDN Web Docs 以获取有关 Flexbox 支持的所有其他属性的更多信息。

显示和 Flex 方向属性

首先，您需要创建一个包含要设置样式的项目的容器。

下面是一个 HTML 示例：

<div class="container">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</div>

flexbox display 属性可以设置为 flex 或 inline-flex。在大多数情况下，我使用 flex。inline-flex 只是使容器内联，而不是容器内的项目。

flex-direction 属性有四个不同的值，您可以将其设置为 row、row-reverse、column 和 column-reverse。

行和列的值是不言自明的，它们将项目放在一行或一列中。row-reverse 和 column-reverse 值设置行或列中的项目，但反转它们的显示方式。例如，当设置列反转值时，项目“一”、“二”和“三”将显示为“三”、“二”、“一”。

以下是如何使用 flexbox 属性 display 和 flex-direction ：

.container {
  display: flex;
  flex-direction: column;
}

这是显示结果：

如果您将 flex-direction 设置为 row-reverse，这将是您的结果：

Align-Items 属性

align-items 属性有助于将项目定位在垂直于项目主轴的横轴上。它可以设置为四个不同的值：stretch、flex-start、flex-end 和 center。

默认情况下，已设置stretch，这就是为什么容器中的项目会自动拉伸到与容器相同的高度。

flex-start 值在容器的开头对齐容器中的项目。

flex-end 值将容器中的项目与其末尾对齐。

 center值将容器中的项目居中对齐。

Justify-Content 属性

justify-content 属性在主轴上对齐项目，这与容器中的项目相同。它可以设置为六个不同的值：flex-start、flex-end、center、space-around、space-between 和 space-evenly。

flex-start、flex-end 和 center 值的作用与它们应用于 align-items 属性时的作用相同，只是在主轴上而不是垂直于主轴。

space-around 值导致每个项目之间的空间相等，并导致两端产生“一半大小”空间。

space-between 值占用所有可用空间，并在容器中的项目之间均匀共享。

space-evenly 值类似于 space-around。它导致每个项目之间的空间相等。然而，不是在两端保持“半尺寸”空间，空间均匀属性会在每一端产生“全尺寸”空间。

CSS Grid

CSS Grid 是二维的，这意味着它非常适合将您的网页深入到几个不同的区域。只要您知道自己在做什么和想要什么，您就可以完全控制如何设置您的网页。

例如，下图显示了如何将网站划分为六个网格区域。每个部分的宽度、高度、位置都可能不同，甚至可以重叠。

我在 CSS 网格中使用的一些基本属性是：display、grid-template-columns、grid-template-rows、grid-column、grid-row 和 gap。

显示和网格模板属性

回到我们的 HTML 示例，为每个项目添加一些类：

<div class="container">
  <p class="one">One</p>
  <p class="two">Two</p>
  <p class="three">Three</p>
</div>

为了实现与上面的 flexbox 示例类似的布局，我们的 CSS 将如下设置：

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.one {
  grid-column: 1;
  grid-row: 1;
}
.two {
  grid-column: 1;
  grid-row: 2;
}
.three {
  grid-column: 1;
  grid-row: 3;
}

我们的显示结果如下：

CSS Grid显示属性可以设置为 grid 或 inline-grid。同样，在大多数情况下，我使用grid。

Grid-template-columns 定义了分配给容器中每个项目的 grid-column 属性的行名称和大小。Grid-template-rows 做同样的事情，除了它影响容器中每个项目的 grid-row 属性。

grid-template-columns 和 grid-template-rows 都有许多不同的值可以分配给它们。与往常一样，我建议查看这些文档。

举几个例子，您可以将这些属性的值设置为像素 (px)、分数 (fr)、字符宽度 (ch)、自动或无。您可以混合和匹配这些值。您还可以为该值传入一个函数，例如 repeat() 或 fit-content()。

这是一个使用 repeat() 函数的示例，其中 grid-template-columns 和 grid-template-rows 有两个混合值：

.container {
  display: grid;
  grid-template-columns: repeat(2, 50ch);
  grid-template-rows: repeat(1, 200px);
  gap: 10px;
}

结果看起来有点像这样：

它不是很漂亮，但它显示了在使用 CSS grid时您对容器或包装器中的项目有多少控制。

网格行和网格列属性

grid-column 和 grid-row 属性都定义了项目在网格容器中的大小和位置。两者都可以设置为数字、名称或全局 CSS 值，例如，继承或未设置。

例如，使用我刚刚列出的一些值，我们可以将原始 CSS 示例更改为：

.one {
  grid-column: 3;
  grid-row: 1 /  span 2;
}
.two {
 grid-column: 12;
 grid-row: 2 / -1;
}
.three {
  grid-column: 6;
  grid-row: main-end;
}

这将是结果：

就像我之前说的，它并不完全漂亮，但它显示了在使用 CSS grid时您对容器或包装器中的项目有多少控制。

差距属性

CSS grid gap 属性设置容器内列和行之间的空间。它的值可以是像素 (px)、字体大小 (em)、百分比，您可以使用 calc() 函数等等。您还可以指定它是仅用于行：row-gap 还是仅用于列：column-gap。

下面是之前的示例，间隙设置为 40px 而不是原来的 10px：

Flexbox 与 CSS Grid：应该使用哪一个？

我的答案是两者都有！

每个 CSS 布局都有自己独特的属性和用途。Flexbox 是一维的，只应在您尝试在 x（水平）或 y（垂直）轴上创建内容时使用。CSS Grid 是二维的，应该用于更复杂的布局。

与往常一样，我建议查看文档。MDN Web Docs 不仅是 CSS 的绝佳资源，也是 HTML、JavaScript、API 等的绝佳资源。W3Schools 也是所有与 Web 开发相关的重要资源。最重要的是，我建议使用两种不同的 CSS 布局。创建类似于我上面给出的示例的简单内容，更改属性，看看会发生什么。

最后，感谢您的阅读，如果您觉得我分享的内容对您有帮助，请分享给您的朋友，也许能够帮助到他们。如果您也喜欢我的内容，请点赞我，关注我，非常感谢。

学习更多技能

请点击下方公众号