1.弹性盒子/伸缩盒子
如果要使用弹性盒子属性，首先要将父级元素变成弹性盒子
Flex-direction 设置伸缩盒子的内部元素的排列方式
Row 从左到右安行排列
Column 从上到下按照列排列
Row-reverse 从右到左按照行排列
Column-reverse 从下到上按照列排列
Flex-shrink 设置弹性盒子的内部元素的收缩方式
注意：所有盒子的默认收缩方式都是1
Flex-grow 设置弹性盒子的扩展比例
注意：所有盒子的默认扩展比率为0
Flex-basis 设置伸缩盒子内部元素的基准值
注意：所有元素默认伸缩基准值为元素的宽度
Flex-wrap 设置伸缩盒子的子元素超出的处理方式
Nowrap 自动收缩子元素以适应盒子
Wrap 超出盒子换到下一行
Wrap-reverse 超出盒子换到上一行
Justify-content 设置伸缩盒子的子元素在水平方向的对齐方式
Flex-start 靠左对齐
Flex-end 靠右对齐
Center 居中对齐
Flex-between 两端对齐
Flex-around 平均分布
如果flex-between和flex-around这两个属性不起作用的话可以换成
Space-between和space-around
Align-items 设置伸缩盒子的子元素的排列方式
Flex-start 在伸缩盒子的左上角排列
Flex-end 在伸缩盒子的左下角排列
Center 在伸缩盒子的中间排列
Baseline 在伸缩盒子的左上角基线排列
Strecth 拉伸所有的子元素同父元素等高
Align-self 针对伸缩盒子中的某个元素单独设置排列方式
Auto 使用默认方式
Flex-start 在伸缩盒子左上角排列
Flex-end 在伸缩盒子的左下角排列
Center 在伸缩盒子的中间排列
Baseline 在伸缩盒子的左上角基线排列
Strecth 拉伸所有的子元素同父元素等高
注意：该属性是在align-items的基础上对某个子元素进行单独设定
该属性的默认方式并不是左上角，而是父级添加的属性
Align-content 设置伸缩盒子的子元素换行后的对齐方式
注意：如果伸缩盒子的子元素没有换行，那么该属性无效
Flex-start 换行内容靠左上角
Flex-end 换行内容靠左下角
Center 换行内容居中显示
Space-between 换行内容在垂直方向的顶部和底部分开
Space-around 各行在弹性盒子容器中平均分布，两端保留子元素和子元素之间间距大小的一半
Strecth 拉伸子元素
Order 设置弹性盒子内的子元素的排列顺序
值为整数
数越小，排列越靠前