Flex
Container(容器)
使用display:flex开启flex弹性盒
在文档流中开辟了一块弹性文档流区域，这会改变其中子元素的布局规则
-
设置布局规则
主轴(X) 交叉轴(Y) flex direction（主轴方向） align-items（子项在交叉轴上的对齐） justify-content（剩余空间分布） align-content（内容区域在交叉轴上的） flex-wrap（换行） gap（间隔）
items(子项)
| 位置 | 比例分配 |
|---|---|
| order（顺序） | flex grow（放大比例） |
| align self（自身对齐） | flex shrink（缩小比例） |
| flex basis（基础大小） | |
| flex [ grow shrink basis ] |
理解
弹性盒改变了网页原本的普通文档流布局规则，变成了弹性文档流布局规则。
在这个弹性盒布局的容器内部，默认的子项排列方式是Row布局，这时候这个容器的主轴方向就是水平的，交叉轴方向就是垂直的。
我们可以向这个这个容器里面添加子项，假设现在只有1~2个的子项这个时候他应该在容器的哪个地方呢，他肯定占不满一整行，这时候多出来的区域就叫它主轴方向上的剩余空间，这时候容器里面就存在2个对象了，一个是添加进去的子项，一个是在这一行主轴方向上面的剩余空间，我们要通过justify-content属性指定子项和剩余空间的位置关系，是子项在左边，剩余空间在右，还是剩余空间在左，子项在右。又或者是均分空间，剩余空间夹杂在子项间，这里是在宏观的调控剩余的空间
这个时候如果我们添加了很多的子项，子项的宽度就会因为子项的数量增多而不断的被压缩，我们可以使用flex-wrap允许容器由流容器升级成内容容器，这个时候当子项超出当前行的时候就会向下换行形成内容区域。
现在就可以控制子项在宏观上面的布局方式，但是现在没办法控制子项和剩余空间的分配比例，也就是说现在我们可以要求container粗略的控制两者之间的关系（根据盒子大小动态调整），如果现在要求子项的位置或者是它应该去挤占掉剩余空间的多少，要在子项上添加位置或者比例分配属性，使用flex grow或者flex shrink可以控制这个子项在当前行还有剩余空间的时候可以放大或者缩小多少比例去挤占剩余空间，还可以通过order属性来控制子项在容器中的先后顺序，在宏观调控的时候，我们使用align-item属性控制主轴方向上的子项的位置，这个时候如果想要控制在主轴方向上的某个子项的位置，就可以使用align self来控制自身在主轴方向上面的对齐方式，控制的更加精细
Grid
使用**
display:grid**开启grid弹性盒
在文档流中开辟了一块弹性文档流区域，这会改变其中子元素的布局规则
设置布局规则
| 模板 | 单元格 | 子项 |
|---|---|---|
| grid template columns（列模板） | Justify Items（水平对齐） | Grid Column（跨列） |
| grid template columns（行模板） | Align Items（垂直对齐） | Grid Row（跨行） |
| gap（间隔） | Justify Self（自身水平对齐方式） | |
| Justify content（模板水平对齐） | Align Self（自身垂直对齐方式） | |
| Align content（模板垂直对齐） |
理解
和Flex布局一样水平方向其实都注重子项与水平剩余空间之间的竞争关系，在我看来水平空间关系，其实是人类阅读屏幕的习惯，一般来说阅读习惯都是自上而下的所以，浏览器的主要滚动方向也是自上而下，所以默认文档流选择自上而下的排列元素是非常合理的。
其实，flex其实有点像office里面的word文件，而grid更像是excel文件，他们的信息密度不一样。所以在grid中我们需要告诉浏览器，我们需要将这一片的横向区域划分为多少块，纵向又划分成多少块，就像如果我们是一个财务，我们制作了一份信息填写表，我们需要员工们填写里面的具体信息，这个时候就需要先制作一个模板，只是单元格内容为空，在grid中通过grid template columns/Row布局来进行设置
然后控制单元格的时候，在excl中我们可以宏观来控制也可以微观来控制，单元格里面文字的对齐方式，这时候只要框选我们要处理的单元格就可以通过对齐按钮来控值单元格内的文字对齐方式，在grid中使用Justify/Align Items来控制，合并单元格使用Grid Column/Row，控制单个单元格的对齐方式Justify/Align Self
总结
这两种现代布局已经可以完成大部分的界面设计，信息流，瀑布流可以使用Flex弹性盒，卡片和功能展示的区域可以使用grid布局