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

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

Grid 和 Flexbox 的区别

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

/* Flexbox */
.wrapper {display: flex;
}

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

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

/* Flexbox */
.wrapper {display: flex;flex-direction: column;
} 

如何决定使用哪个？

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

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

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

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

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

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

使用场景

CSS Flexbox

（1）网站导航

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

布局代码如下：

.site-header {display: f