CSS 网格与 Flexbox

2018年，全球52.2%的网站流量来自手机。鉴于智能手机屏幕尺寸的多样性，响应式网页设计比以往任何时候都更加重要。无论使用何种媒介，网页都必须呈现良好的效果。

然而，在不同设备（和浏览器）上创建一致的复杂多列布局并非易事。几年前，网页设计师只能使用表格、浮动、定位和内联块布局，而这些布局功能缺失，令人沮丧。

这种功能的缺乏促使了响应式布局模型的开发，这些模型使得创建、理解和维护网页布局变得更加容易。CSS Grid 和 Flexbox 是两种最流行的布局模型。

但是您怎么知道该使用哪一种呢？这两种模型之间有什么区别？我们将在本文中解答这些问题。

1D 与 2D

Grid 和 Flexbox 之间最根本的区别在于它们处理定位的方式。Grid 非常适合网页或应用中项目的二维布局，因为它可以同时管理列和行。例如，当你设计一个网页，希望在几行内容旁边放置一个侧边栏时，这非常有用。

然而，弹性盒是一维的。它要么处理一列，要么处理一行。弹性盒容器会扩展其元素以填充可用的空间，或者收缩以防止溢出。

基于内容 vs. 基于容器

弹性盒布局在其内容加载后计算。它基于内容。单元格（弹性项目）的大小在弹性项目本身内部定义。以下示例解释了这一点。这是一行使用弹性盒样式设置的元素：

divparent是弹性容器，但我们不会设置其中项目的大小。这在弹性项目里完成，在那里通过设置 来定义flex: 1 1 auto。该flex属性是flex-grow、flex-shrink和 的简写flex-basis。

然而，CSS Grid 需要你先定义布局。它基于容器。无论容器内的内容是什么，布局都会计算。让我们再看一下之前的示例，只不过这次我们将使用 Grid 来设置样式。

如你所见，输出与 Flexbox 示例完全相同（除了颜色）。然而，这里网格项的大小不是在 grid-items 内部定义的，而是在grid-container、parentdiv 到 中定义的grid-template-columns。

因此，CSS Grid 更适合制作整个页面布局，而当您了解将要使用的内容时，Flexbox 会更好。

不同的包装方式

尽管两种模型都有办法包装大于容器宽度的物品，但每种模型处理包装的方式却截然不同。

需要记住的最重要的一点是，当 Flexbox 中的项目被推入新的行或列时，它们会丢失上一行或上一列的上下文。这是因为 Flexbox 是一维的。

然而，在 CSS 网格中，项目被下推时不会丢失其上下文，因为它们仍然是你之前定义的网格的一部分。项目将沿着网格线落下。

两种包装方式都有用。弹性盒通常更适合用于表单，例如，一个包含三个按钮（电子邮件、姓名、发送）的订阅表单，因为您希望每个按钮在屏幕缩小或扩展时占据尽可能多的空间。

当您希望推送的项目保持相同的宽度时，CSS Grid 是更好的选择，例如，在创建图像库时您可能希望如此。

选择哪一个？

如果您需要仅由行或列组成的网页布局，那么 Flexbox 是最佳选择。但是，如果您的布局复杂，包含多行和多列，则需要使用 CSS Grid。

此外，不要认为你必须在 CSS Grid 和 Flexbox 之间二选一。你可能想用 CSS Grid 设计整体网页布局，但在网站的某些部分使用 Flexbox。两者都以不同的方式解决布局问题，并且两种模型完全可以互补，从而创建你想要的网站。