Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
flex container /*作用于flex容器整体*/
flex-direction/*布局方向*/
row/*水平布局*/
row-reverse/*水平反向*/
column/*垂直布局*/
column-reverse/*垂直反向*/
flex-wrap/*是否换行*/
nowrap/*不换行*/
wrap/*左上角开始计算换行*/
wrap-reverse/*左下角开始计算换行*/
justify-content/*设置盒内子元素在主轴方向上的对齐方式*/
flex-start/*由主轴头部开始延伸*/
flex-end/*由主轴尾部开始延伸*/
center/*在主轴方向居中*/
space-between/*在主轴方向两端对齐*/
space-around/*在主轴方向两端对齐（元素间间距等于两端间距的1倍）*/
align-items/*设置盒内子元素在侧轴方向上的对齐方式*/
stretch/*在侧轴方向上进行拉伸（如设置了width则无效）*/
flex-start/*由侧轴头部开始延伸*/
flex-end/*由侧轴尾部开始延伸*/
center/*在侧轴方向居中*/
baseline/*基线对齐（以文字低端基线为参考线）*/
inherit /*从父元素继承该属性*/
align-content /*设置盒内子元素在侧轴方向上的对齐方式（多作用于多行子元素）*/
stretch/*在侧轴方向上进行拉伸（如设置了width则无效）*/
flex-start/*由侧轴头部开始延伸*/
flex-end/*由侧轴尾部开始延伸*/
center/*在侧轴方向居中*/
space-between/*在侧轴方向两端对齐*/
space-around/*在侧轴方向两端对齐（元素间间距等于两端间距的1倍）*/
initial/*在侧轴方向顶端对齐且子元素间均有相同间距*/
flex-item /*作用于单个子元素的属性*/
order /*设置当前子元素在主轴上的排序（数字越大越靠后）*/
flex-grow/*设置当前子元素占据主轴剩余空间的比例（wrap:nowrap/wrap:wrap）*/
flex-shrink/*设置当前子元素压缩溢出空间（宽度）的比例（wrap:nowrap）*/
flex-basis/*设置当前子元素的初始长度*/
align-self /*设置当前子元素在侧轴方向上的对齐方式*/
stretch/*在侧轴方向上进行拉伸（如设置了width则无效）*/
flex-start/*由侧轴头部开始延伸*/
flex-end/*由侧轴尾部开始延伸*/
center/*在侧轴方向居中*/
baseline/*基线对齐*/
inherit/*从父元素继承该属性*/
