好久没有更新内容了，今天记录下弹性布局的知识点，比较简洁，不多说其他话了，直接开写。
一、flex布局的设置方式和组成部分
设置方式：在需要弹性布局区域的父元素上添加dispaly: flex，这个父元素必须是直系父元素。
组成部分：弹性容器、弹性盒子、主轴、侧轴或交叉轴。
二、属性：
1、justify-content
调节元素在主轴的对齐方式，默认主轴是水平方向（x轴）。（添加在弹性容器中）
| flex-start | 默认值，起点对齐 |
| flex-end | 终点对齐 |
| center | 沿主轴居中对齐 |
| space-around | 均匀排列，盒子之间的间距是左右两头间距的2倍 |
| space-between | 均匀排列，只有盒子之间有间距（这个我用的比较多） |
| space-evenly | 均匀排列，所有地方间距相等 |
2、align-items和align-self
align-items：调节元素在侧轴对齐方式（添加到弹性容器中）
align-self: 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子中）
| flex-start | 默认值，起点对齐 |
| flex-end | 终点依次排列 |
| center | 侧轴居中排列 |
| stretch |
默认值，弹性盒子沿着主轴线被拉伸至铺满容器，
|
3、flex属性
属性：flex: 值
定义项目分配父盒子剩余尺寸份数，剩余的意思 = 父盒子的宽度 - 子盒子中没有设置flex的宽度。
举个栗子：
父盒子：display: flex; width: 200px;
A盒子：flex: 2
B盒子：flex: 1
C盒子：width: 50px
则： 剩余的尺寸 = 200px - 50px；那么A盒子 = (剩余的尺寸 * 2) / 3 B盒子 = (剩余的尺寸 * 1) / 3
4、修改主轴方向
使用fle-direction改变元素排列方向
| row | 行（水平方向， 左==》右） |
| column | 列（垂直方向，上===》下） |
| row-reverse | 行（右==》左） |
| column-reverse | 列（下==》上） |
5、flex-wrap弹性盒子换行
可以实现弹性盒子多行排列效果
属性： flex-wrap: wrap换行 | nowrap 不换行
因为项目中经常使用到flex布局，所以在这里记录了一下，毕竟好记性不如烂笔头。
标签：flex,排列,盒子,align,布局,弹性,对齐,css From： https://www.cnblogs.com/gjw0818/p/17081074.html