Flex布局
一. 主轴对齐方式
使用 justify-content 属性调节元素在主轴上的对齐方式
添加到弹性容器（父级）
1. 从起点开始依次排列（默认值）
justify-content: flex-start;
2. 从终点开始依次排列
justify-content: flex-end;
3. 沿主轴居中排列
justify-content: center;
4. 弹性盒子沿主轴均匀排列，空白间距平均分布在弹性盒子的两侧
justify-content: space-around;
5. 弹性盒子沿主轴均匀排列，空白间距平均分布在相邻的弹性盒子之间
justify-content: space-between;
6. 弹性盒子沿主轴均匀排列，弹性盒子与弹性盒子、弹性盒子与弹性容器之间的间距相等
justify-content: space-evenly;
二. 侧轴对齐方式
1.使用 allgn-items 调节元素在侧轴上的对齐方式
添加到弹性容器（父级）
1. 从起点开始依次排列
align-items: flex-start;
2. 从终点开始依次排列
align-items: flex-end;
3. 沿侧轴居中排列
align-items: center;
4. 默认效果，弹性盒子沿着侧轴线被拉伸至铺满容器（要弹性盒子在没有设置高的时候才会生效）
align-items: stretch;
2.使用 align-self 控制某一个弹性盒子在侧轴上的对齐方式
添加到弹性盒子（子级） 取值和 align-items 相同
最初的样子（ 没加 align-self ），后面都给中间的盒子添加 align-self
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
在没有设置高的情况下才能出效果
三、主轴方向
使用 flex-direction 属性改变主轴方向
主轴默认都是水平方向，侧轴默认都是垂直方向
取值：
row
水平，从左向右（默认值）
column
垂直，从上到下（经常使用）
row-reverse
水平，从右向左
column-reverse
垂直，从下向上
四、弹性盒子换行
使用 flex-wrap 实现弹性盒子多行排列效果
1.wrap
规定弹性盒子在在需要时换行
flex-wrap: wrap;
2.wrap-reverse
规定弹性盒子在在需要时换行，以反方向换行
flex-wrap: wrap-reverse;
调整多行对齐方式
使用 align-content
取值和 jusrify-content基本相同
align-items 属性一般只针对单行对齐方式，使用 flex-wrap后，多行对齐使用 jusrify-content 属性来代替 align-items 属性
*学习笔记，有不对的地方望指正，感谢！*
