一五年之前常见的就是float流式布局（块级和行级布局就不用说了），之后有了flexbox弹性布局, 然后现在又有了Grid网格布局。

flexbox

弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。 --MDN

alt

flex 布局只适用于线性布局，没有太多绕弯的地方，更复杂的可以用Grid。首先，父元素设置display:flex;, 然后再根据需要定制如下属性

flex-direction --主轴走向
justify-content --主轴方向如何排列方式
align-items --侧轴排列方式
align-self --当前项目侧轴如何对齐
flex-wrap --内容是否自动换行

特性

一维单向布局
弹性填充

使用的场景如：一组按钮顺序排列，等比区分间隔，垂直居中。响应式布局。操作这种单向平铺的布局是非常舒服的，尤其是列表之类的，自动填充空白，等比分割。但是，如果是非平铺的就不太适用了

CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。 --MDN

网格也是一个蛮有意思的东西，就像一个可以随意定制的 table 一样，可以自由选择元素的行和列。另外，网格属于二维布局。什么意思呢？它需要同时设置横向和纵向，而 flex 你操作的只是主轴，而侧轴是沿着主轴服务的。