首先，读这篇文章之前你需要对 flexbox 和 grid 布局有所了解。如果你还不了解，可以去MDN搜索查看相关知识点（flexbox布局、grid布局）。
一般来讲，布局的传统解决方案是基于盒子模型，依赖display + position + float ，但是它对于那些比较特殊的布局非常不方便，比如，垂直居中实现起来就非常麻烦。
flexbox 的出现很好地解决了这个问题。它利用弹性盒子的特性能够更快速的进行简单布局，但这仅限于一维布局。而 grid 则是基于二维布局的，目的是改变布局的解决方案，能够实现更多复杂布局。它与 flexbox 有很多类似的功能，但各有优劣，需要根据实际情况选择合适的解决方案。
下面就让我们来看看两种布局方式的对比以及如何正确地选择更合适的布局方案。
基本概念
flexbox
Flexbox 是 CSS Flexible Box Layout Module 的常用名称，这是一种用于在单个维度（行或列）中显示项目的布局模型。
在规范中，Flexbox 被描述为用户界面设计的布局模型。 Flexbox 的关键特性是 flex 布局中的项目可以增大和缩小。可以将空间（Space）分配到项目本身、项目之间或项目周围。
Flexbox 还可以对齐主轴或交叉轴上的项目，从而提供对一组项目大小和对齐的高级控制。
grid
CSS网格布局引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件。
定义
两种布局方案都是通过 display 属性来定义
flexbox
display: flex | inline-flex;
复制代码grid
display: grid | inline-grid | subgrid;
复制代码一维布局与二维布局
一维布局就是要么横向布局，要么纵向布局，使用 flexbox 实现比较合适。
二维布局就是行列整体布局，使用 grid 实现比较合适。
具体可以看下面的栗子：
从内容出发还是从布局入手？
除了从一维和二维布局之间的区别，还有一种办法决定该使用 flexbox 还是 grid 进行布局。当我们不清楚用哪种方式实现的时候我们就需要考虑当前场景是内容优先还是布局优先。
两种布局的核心差异也是 flexbox 是基于内容，而 grid 是基于布局。
下面的例子我们可以看到分别用 flexbox 和 grid 实现一个顶部标题，可以看到虽然大致效果差不多，但审查元素的时候你会看到使用 grid 实现的内容被分成了12列，因为我们需要将 LOGOUT 元素放置在最右边，而不能像 flexbox 布局一样简单地使用 margin-left: auto 实现。
所以当我们在纠结是使用 flexbox 还是 grid 的时候，我们应该先想一下当前场景是基于内容还是基于布局，而且不是单纯地只使用其中一种方式，而是将二者有机地结合在一起使用。
浏览器兼容性
flexbox
grid
总结
整体来讲，现在无论是 flexbox 还是 grid 整体兼容性都还是相当不错的， grid 相较于 flexbox 兼容性稍微逊色一点，但是在条件允许的情况下，我更推荐在能用 grid 的情况下尽量使用 grid 进行布局，根据不同场景可以结合两种布局同时使用。
思考
以下布局皆由 grid 实现，试想一下，倘若用 flexbox 的方式实现需要怎样去实现？对比 grid 布局方式的优劣如何？