display: flex(父容器属性);
给元素添加display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。弹性子元素默认是在同一行按照从左到右的顺序并排排列。弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，该高度由它们的内容决定
flex-direction(父容器属性)
用来设置主轴方向
- row：主轴沿着inline方向延伸(inline：文字书写方向，汉字自左向右)
- row-reverse：inline反方向，自右向左
- column：主轴沿着block排列的方向(display: block的块盒，自上而下)
- column-reverse：block的反方向，自下而上
- 反转的不只是位置的变化，还包括子项目顺序的反转
- 不设置item元素的宽高：
不设置宽高的情况下，子项目在主轴方向的尺寸为内容撑开的大小，在侧轴方向会撑满整个空间
当值设置为：row
不设置宽高：
设置宽高：
width: 100px;
height: 50px;
当值设置为：column
不设置宽高：
设置宽高：
width: 100px;
height: 50px;
justify-content(父容器属性)
设置子项目在主轴方向上的对齐方式
- flex-start：默认值，沿主轴起点对齐
- flex-end：沿主轴终点对齐
- center：沿主轴居中对齐
- space-between：沿主轴空白居中分布，两侧贴边
- space-around：沿主轴空白环绕分布
- space-evenly：沿主轴空白均匀分布
当值设置为：flex-start
当值设置为：flex-end
当值设置为：center
当值设置为：space-between
当值设置为：space-around
当值设置为：space-evenly
align-items(父容器属性)
设置单行子项目在侧轴方向上的对齐方式
- flex-start：沿侧轴起点对齐(高度随内容撑开)
- center：沿侧轴居中对齐(高度随内容撑开)
- flex-end：沿侧轴终点对齐(高度随内容撑开)
- stretch：沿侧轴拉伸撑开整个容器(不设置高度则拉伸，设置高度则固定)
- baseline：沿着基线对齐(高度随内容撑开)
- normal：默认值。等同于stretch
flex-wrap(父容器属性)
设置子项目是否换行
- nowrap：默认值，不换行(子项目在容器中空间不够的话，缩放以适应宽度)
- wrap：换行(设置为换行后，才按照设置的宽度呈现，空间不够会换行)
- wrap-reserve：换行并反转
align-content(父容器属性)
设置多行子项目在侧轴上的对齐方式(类似于justify-content)
- flex-start：默认值，沿侧轴起点对齐(高度随内容撑开)
- center：沿侧轴居中对齐(高度随内容撑开)
- flex-end：沿侧轴终点对齐(高度随内容撑开)
- space-between：沿侧轴空白居中分布，两侧贴边(高度随内容撑开)
- spance-around：沿侧轴空白环绕分布
- spance-evenly：沿侧轴空白均匀分布(高度随内容撑开)
- stretch：高度自动时，所有子项目的高度会撑满父容器高度。设置高度则会按照固定高度呈现，且占据的高度不会变，这点是和flex-start不同的
- normal：默认值，等同于stretch
