简述
弹性布局是css3新引入的布局模式，英文是flexbox，他决定了元素如何在页面上排列，使他们能在在不同的屏幕尺寸和设备下可预测地展现出来。
本质就是一个盒子，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间
核心概念
大的容器盒子叫 flex container ，被包裹在内的元素叫 flex item
从做左到右的分界轴坐标叫主轴，从上到下的分界轴叫交叉轴
项目会沿主轴方向进行排列，如果空间不够会沿交叉轴方向另起一行
将一个块级元素设置为弹性容器，只需要设置该元素的display值为flex
.container{
display: flex;
}
容器属性
flex-direction
用于指定主轴方向
| row | 从左到右，默认值 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
flex-wrap
默认为元素在主轴方向一直堆叠，也用于指定元素放不下时，在哪里新起一行
justify-content
控制item在主轴方向的对齐方式
| flex-start | 默认左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 项目和容器之间没有空隙，项目之间有间隔 |
| space-around | 项目与项目之间有间隔，间隔是项目与容器之间间隔的两倍 |
align-items
用于控制项目在交叉轴方向上的对齐方式
| stretch | 默认值，占满交叉轴上的所有空间 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中心对齐 |
| baseline | 所有项目的内容在同一水平 |
align-content
定义多根轴线的对齐方式，个人理解这里的多根轴线指的是多个主轴（设定了flex-warp属性，另起行）
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 |
| stretch | 轴线占满整个交叉轴 |
Item属性
order
用于规定item的排列顺序，越小排越前
flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
如果item的flex-grow都是 1 ，则它们将等分剩余空间
其他数字则按比例分配空间
flex-shrink
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
References
https://css-tricks.com/snippets/css/a-guide-to-flexbox （官方文档）
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox （mdn的详解）
https://juejin.cn/post/7085239691728912414（掘金，基本是看这个学的，还有动图好爽）
https://blog.51cto.com/yszr/2820428
https://juejin.cn/post/7183221193636315173
https://www.bilibili.com/video/BV1di4y1U75N/?spm_id_from=333.337.search-card.all.click （弹性布局示例）
标签：flex,轴线,交叉,布局,详解,https,对齐,项目 From： https://www.cnblogs.com/CNLayton/p/17103786.html