早期前端所有 HTML 页面的布局还都是通过 table、float 以及其他的 CSS 属性来完成的。面对复杂页面的布局，却没有很好的办法。然而 Flexbox 的出现，便轻松的解决了复杂的 Web 布局。 现在又出现了一个构建 HTML 最佳布局体系的新竞争者。它就是强大的 CSS Grid 布局。

　　二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。

　　简述 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

　　Flexbox布局（Flexible Box)模块旨在提供一个容器里的项目布局（基于一维），即使他们的大小是未知或者是动态的。

　　简述 网格布局（Grid）是最强大的 CSS 布局方案。 Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

　　采用网格布局的区域，称为容器（container）。容器内部采用网格定位的子元素，称为项目（item）。