Flexbox VS Grid，谁是布局之王？

我们都知道 CSS 控制了“样式”(presentation layer)，也知道布局是 CSS 的重中之重。
那么问题来了，究竟谁才是布局之王？

从：

远古时代的 table
div + float + 各种各种清除浮动带来的影响
利用各种各样的 position
利用各种负 margin、新增加一个元素、calc、min/max height 来实现效果

实现各式布局的时代一路走来，经历了各种将本来不用于布局的属性强行来布局后，专为布局而生的 Flexbox 和 grid，仿佛让前端er 们看到了布局的曙光：

兼容性

考虑浏览器的兼容性？caniuse 一下：

https://caniuse.com/#search=Flexbox
https://caniuse.com/#search=grid

Flexbox 略好，但如果你不用考虑 ie11 的话加上 Autoprefixer 就可以忽略了。这一项 pass。

Flexbox：flexible & responsive

Flexbox 的关键词是伸缩性和响应式。

伸缩性顾名思义，Flexbox 提供一种更有效的方式来布置，对齐和分配容器中的物品之间的空间，即使它们的尺寸未知（因此 “flexible”）。

Flex 布局背后的主要思想是赋予容器更改其项目的宽度 / 高度（和顺序）以最好地填充可用空间（主要适应各种显示设备和屏幕尺寸）的能力。

需要注意的是，Flexbox 布局与方向无关（main axis 和 corss axis 可以通过 flex-direction 来互换），而不是常规布局（基于垂直方向的块和基于水平方向的内联块）。

Flexbox 可以多简化我们的布局方式呢，举个垂直居中例子：

.container {
  display: flex;
  align-items: center;
}

https://css-tricks.com/centering-css-complete-guide/ 中举出来的为了实现垂直居中效果的各种 hack，被 Flexbox 短短的两句代码轻易解决了。

Flexbox 可以多伸缩性（flexible）呢（直接上代码把）:

https://github.com/RayJune/JustToDo/blob/81171a39f9/src/styles/main-content.css#L69

几行代码实现 button 的响应式效果（responsive），欢迎在线访问
https://todo.rayjune.me 来查看效果：）

Grid：two-dimension & responsive

Grid 的关键词是二维网格和响应式。

依然顾名思义，Grid 通过将页面分割成一个个网格，元素填充到响应表格中完成布局。

与 Flexbox 尤为不同的是，前者专注一维布局（main axis，corss axis 上作用效果次要），grid 可以掌握两个维度的布局。所以只要是 Flexbox 能做到的，grid 几乎都能做到：

/* grid */
.container {
  display: grid;
  grid-templetate-rows: repeat(auto);
}

.container {
  display: Flexbox;
  flex-direction: row;
}

而且还能做得更多更好（更多 demo 建议查询 cssgrid.io，wesbos 的例子举得很形象，Gird 的强大超出想象）

pros & confs

既然 Flexbox 的特点在于：

一维上功能够用，而二维则不行
浏览器兼容性更好
使用起来更加短平快

我们不难推算出：更适合 Flexbox 的场合：

只在一行或一列上想要达到效果时
更注重兼容性时（Flexbox 兼容性好）
想达到的功能很简单时，比如垂直居中

Grid 的优点在于：

二维上布局横竖通吃，堪称布局之王
浏览器兼容性次之
使用起来有一些重型（比较而言）

所以更适合 Grid 的场合有：

制作整个页面布局时。不仅有布局性能的原因，Flexbox 本身适用于部分的布局，不适用于全局的布局
当制造二维的、网格类布局时。制造间隔是 Flexbox 的最大痛点，这点 grid-gap 可以轻松解决
通过 auto-layout，minmax()，repeat() 和 auto-fill 等强大的功能来减少 @media query

总结

软件开发中没有 silver bullet，只有 depends on。根据使用场景选择解决方案才是不变的的正确答案。

P.S. 我会告诉你 Flexbox 和 Grid 一起使用效果更好吗：）

Reference

Flexbox

The Flexbox aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the Flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).

When use & When not?

While those work well for pages, they lack flexibility to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

So Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.