为了在网页中布局元素，我们经常使用 CSS 的浮动、定位属性。而在 CSS 中，有两种比较新的布局方式，分别是弹性盒子布局和网格布局，他们使用简单、功能强大，给网页开发带来了许多新的可能。
弹性盒子布局（flexbox）
弹性盒子布局相关属性的到来给了网页布局更多的可能性。弹性盒子有多种排布方式可供设置，且子元素尺寸可以伸缩。
对某个元素指定 display:flex 后，该元素便成为了弹性容器，而子元素则作为弹性元素。flex-direction 决定了布局的方向，justify-content 属性使得内容可以按指定方式对齐。
在弹性盒子布局的帮助下，瀑布信息流的卡片展示能够更加自由，同时做到响应式布局。
如下方例子所示，指定flex布局后，元素在一行内展示。
设置相关的 CSS 属性，调整窗口的大小，元素会根据窗口大小自动伸展换行排布.
网格布局（grid）
在网格布局出现前，如果想实现行列分明的布局，最常用的方法是通过HTML表格来排版。但使用表格不仅需要处理单元格的默认样式，跨行、跨列排版也十分麻烦。网格布局属性使得类似的排版实现更加简单、自由了。
为某个元素设置 display:grid 后，该元素便成为了网格容器，而子元素则作为网格元素。我们还需要通过 grid-template-columns 属性设置网格轨道，对每个网格元素设置 grid-row 和 grid-column 来指定他们所在的行和列。
在一些导航页面中，通常会密集排布许多功能。网格布局可以方便地排布这些功能，既可以是相同大小的矩形，也可以是某几行或某几列合并。较大的网格可以用于强调比较重要或是常用的功能，较小的网格也能同时兼顾其他次要功能的布局。
如下方例子所示，通过设置 grid-row 和 grid-column ，我们就可以简单地指定每个元素所占用的行、列，也就可以很快将这些元素根据我们的需求进行排列。
由于弹性盒子布局和网格布局在较高版本的浏览器才被引入，不同浏览器的支持情况不同，因此真正使用这些布局的时候还得考虑一下他们的兼容性。如果项目需要兼容 IE 浏览器或者较低版本的浏览器，那么这些布局可能就不适合使用。
