CSS中flex常用的使用方法

display: flex;

flex布局模型，默认沿着水平方向排列

/* 主轴对齐—水平划分居中 */
justify-content: space-between;
/* 主轴对齐-水平居中 */
justify-content: center;
/* 侧轴对齐—垂直居中 */
align-items: center;

flex-direction可以修改主轴方向 column列垂直

如果设置了flex-direction：column
则此时主轴沿着列排列，侧轴垂直排列

所以一旦修改了主轴方向，先确定主轴方向，再选择对应的属性实现主轴或者侧轴
这俩实现的效果翻了一下
justify-content: center; //垂直居中
align-items: center;       //水平居中

flex-wrap:弹性盒子根据大小自动换行
可选值：
nowrap：默认值 元素不会自动换行
wrap：元素沿着侧轴方向自动换行
wrap-reverse：元素沿着侧轴反方向换行

justify-content:分配主轴上的空白空间
可选值：
flex-start：元素沿着主轴起边排列
flex-end： 元素沿着主轴终边排列
center： 元素居中排列
space-around： 空白分布到元素两侧（两边有 两边少中间多 中间的是两个元素加起来的）
space-between： 空白均匀分布到元素间（两边没有 中间均匀）
space-evenly： 空白分布到元素的单侧（两边有 看上去是全部均匀）

align-content:调整行对齐方式(取值和 justify-content基本相同)
可选值:
center：全部到中间，间距放到上下方
space-around：上下间距相同，中间是上下的二倍，因为两个元素的上和下放在一起
space-between：间距在两行之间，上下没有间距了

align-items: 元素在侧轴上如何对齐,设置的是元素间的关系
可选值：
stretch：默认值，将元素的长度设置为相同的值
flex-start：元素不会拉伸 沿着侧轴起边对齐
flex-end：元素不会拉伸 沿着侧轴终边对齐
center：居中对齐
baseline：基线对齐