CSS Flex 布局和 Grid 布局怎么选？

CSS 中的 Flex 布局​和 Grid 布局都是非常强大的布局方案，那什么情况下应该使用 Grid 布局，什么情况下应该使用 Flex 布局呢？本文就来通过一些示例看看两者之间的区别以及使用场景！

Grid 和 Flexbox 的区别

Grid 是二维布局模型，它有列和行。而 Flexbox 是一维布局模型，可以将其子项目布局为列或行，但不能同时布局行和列。

.wrapper {
  display: flex;
}


.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 16px;
}

可以看到，Flexbox 正在布局元素的内联列表（对一行元素进行布局），而 CSS 网格使它们组成列和行的网格。当然，也可以使用 Flexbox 布局对一列元素进行布局：

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

如何决定使用哪个？

在选择其中一种布局时，可以考虑以下问题：

• 组件的子项如何显示？内联还是作为列和行？
• 组件如何在各种尺寸的屏幕上显示？

大多数情况下，如果组件的子项都以内联的方式显示，那么 Flexbox 布局可能是最好的解决方案。考虑以下组件：

这个组件中包含两个子元素，需要在一行中显示，就非常适合使用 Flex 布局。

如果布局需要多个列和行，那么 Grid 布局就是最合适的解决方案。考虑以下组件：

看完这些示例，下面来通过一些具体的示例学习如何决定使用哪个布局方案。

使用场景

CSS Flexbox

（1）网站导航

大多数情况下，网站导航可以使用 CSS Flexbox 来构建。最常见的模式就是左侧为网站 Logo，右侧为网站导航，中间为空白区域。Flex 就可以轻松实现这个布局：

布局代码如下：

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

（2）操作列表

操作列表通常由一组可以执行的操作按钮组成，它们排列在一行中：

可以看到，这些操作按钮都是相邻的，并且是水平分布的。这种情况就非常适合使用 Flex 来布局：

.actions-list {
  display: flex;
}

.actions-list__item {
  flex: 1;
}

下面这种包含栏或操作栏的场景也同样适用 Flex 布局：

这个组件的页眉和页脚都有内联显示的子元素。对于页眉，布局代码如下：

.modal-header {
  display: flex;
  justify-content: space-between;
}

对于页脚，Cancel 按钮比较特殊，可以使用自动左边距将其推到右侧。

.cancel__action {
  margin-left: auto;
}

（3）表单元素

下图第一个组件中，左侧的输入框和右侧的按钮组合是 Flexbox 布局的完美用例：

在第二个组件中，使用 Flex 也可以快速完成布局。这里输入框占据了所有剩余空间，其具有动态宽度。布局代码如下：

.input {
  flex: 1 1 auto;
}

（4）评论组件

Flexbox 的另一个常见用例就是评论组件。考虑以下示例：

这里左侧是用户的头像，右侧是评论内容，其占据了父元素的剩余空间。

（5）卡片组件

卡片组件有很多类型，最常见的卡片设计如下：

左侧的卡片组件为上下布局，此时 Flex 容器的方向是列。右侧的卡片组件为左右布局，此时 Flex 容器的方向是行，这是 Flex 布局方向的默认值。

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

@media (min-width: 800px) {
  .card {
    flex-direction: row;
  }
}

另一种卡片，图标的下方带有文本，它可以是一个按钮、链接。这种模式下 Flex 布局同样适用：

第一种模式的布局代码如下：

.card {
  display: flex;
  justify-content: center;
}

第二种模式的布局代码如下：

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

（6）Tab 菜单

当涉及到占据整个屏幕宽度的元素并且具有应该填满所有可用空间的项目时，Flexbox 也是完美的解决方案。

这里，每个项目都应该填充可用空间，并且它们的宽度是相等的。通过将容器元素的 display​ 属性设置为 flex，即可轻松完成。

.tabs__item {
  flex-grow: 1;
}

（7）功能列表

Flexbox 的一个很实用功能就是可以反转元素的方向。默认情况下，Flexbox 的方向是从从左到右的行，我们可以可以这样来反转它：

.item {
  flex-direction: row-reverse;
}

在下面的例子中，这个功能就非常实用：

在布局时，可以对偶数行的元素使用上述的方向反转的属性值。

（8）内容居中

假设有一个组件，它的内容需要在水平和垂直方向居中。可以通过 text-align 实现文本的水平居中。

.hero {
  text-align: center;
}

可以使用 Flexbox 布局让内容在水平和垂直方向居中：

.hero {
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
}

CSS Grid

（1）侧边栏+内容区

当有侧边栏和内容区时，网格布局就是一个完美的解决方案。考虑以下组件：

可以在 CSS 中这样定义：

<div class="wrapper">
  <aside>Sidebaraside>
  <main>Mainmain>
div>

@media (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 16px;
  }

  aside {
    align-self: start;
  }
}

如果