Flex 只是规定item在轴线上的位置，是一维布局，而 Grid，因为把容器划分成"行"和"列"，产生单元格，然后指定item所在的单元格，可以说是二维布局。Grid 布局远比 Flex 布局强大。
Flex：flex容器中存在两条轴， 横轴和纵轴， 容器中的每个单元称为flex item。
在容器上可以设置6个属性：
- flex-direction 主轴方向
- flex-wrap 主轴超出范围是否换行
- flex-flow flex-direction和flex-wrap的复合属性
- justify-content 元素在主轴的对齐方式
- align-items 元素在侧轴的对齐方式
- align-content 元素在侧轴的对齐方式（多行）
注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
Flex 有六种属性可用在 item 上:
1. order flex-item的排序
2. flex-basis flex-item的宽度
3. flex-grow flex-item占据剩余空间的比例
4. flex-shrink flex-item占据收缩空间的比例
5. flex flex-grow\flex-shrink\flex-basis的复合属性
6. align-self 规定flex-item自己的对齐方式
Grid：像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。
