1、display：flex
弹性盒的作用就是控制子元素按照主轴方向进行排列。
如果在弹性盒里设置单独子元素在父元素水平垂直居中
父元素：display：flex
子元素：margin：auto
弹性盒下的子元素：灵活元素，内联元素也能设置宽高
2、flex-direction：定义弹性盒的主轴方向
x轴（顶部左边，底部是右边）
row：设置内容在X轴的顶部显示（默认值）
row-reverse：设置内容在X轴的底部显示
y轴（顶部是上边，底部是下边）
column：设置内容在Y轴的顶部显示
column-reverse：设置内容在Y轴的底部显示
3、flex-wrap：设置换行
no-wrap：挤压内容，不换行（默认值）
wrap：强制换行
wrap-reverse：自动换行，但是内容是反转显示
4、flex-flow：主轴和换行简写
flex-flow：row nowrap
5、justify-content：设置主轴内容的对齐方式
flex-start：内容在主轴顶部对齐
flex-end：内容在主轴底部对齐
center：主轴居中
space-between：两端对齐，中间的距离自适应
space-around：每个子元素左右两边距离都自适应
space-evenly：每个子元素的间距都自适应
6、align-items：侧轴的对齐方式
flex-start：内容在侧轴顶部对齐
flex-end：内容在侧轴底部对齐
center：主侧居中
stratch：高度拉伸（前提条件，内容没有高度会拉伸）
baseline：基线对齐，一般情况下和flex-start效果一样
7、align-content：侧轴行对齐，多行内容的侧轴
flex-start：内容在侧轴顶部对齐，取消行间距
flex-end：内容在侧轴底部对齐，取消行间距
center：主侧居中，取消行间距
space-between：行高两端对齐，中间自适应
space-around：所有的距离都自适应
8、单独给灵活设置的属性
（1）order：设置的灵活元素的排列方式，值越大，内容往后排列，值越小，内容往前排列，可以设置负值
（2）align-self：设置单独内容侧轴
flex-start：侧轴顶部显示
flex-end：侧轴底部显示
center：侧轴居中显示
stretch：拉伸
（3）flex-grow：拉伸
子元素的宽高加起来不能大于父元素的宽高
需要有剩余空间flex-grow才有效果
flex-grow拉伸的高度还是宽度，跟主轴的方向有关
flex-grow：0；默认值
主轴是x，拉伸的是宽
主轴是y，拉伸的是高
（4）flex-shrink：收缩，默认值是1
必须是子元素的内容超出父元素，收缩才会起效果。
收缩量是超出部分/设置的收缩份数
（5）flex-basis：重新设置内容的宽高，默认值是auto
主轴是X轴，覆盖的是宽
主轴是Y轴，覆盖的是高
flex-basis，可以设置像素，也可以设置百分比（父元素的百分比）
（6）flex：拉伸 收缩 basis （复合属性）
默认：flex：0 1 auto