display: flex;
flex-wrap:nowrap;(默认不换行 wrap换行)/
flex-wrap:wrap-reverse;上下行换顺序
flex-direction:row-reverse(颠倒顺序/row从左到右的顺序
column设置主轴从上到下的顺序 变换主轴 column-reverse颠倒顺序)/
水平轴对齐
justify-content: center;/* 水平方向居中 /
justify-content: flex-end;/ 水平方向右对齐 /
justify-content: flex-start;/ 水平方向左对齐 /
/ justify-content: space-between; 左右靠边对齐 /
/ justify-content: space-around; 子元素左右距离相同 相邻子元素之间的距离会变双倍 /
/ justify-content: space-evenly; 子元素相邻的距离相同 */
交叉轴对齐
/* align-items: center; 垂直方向居中*/ /* align-items: flex-start; 交叉轴的起点,垂直方向的顶部 / / align-items: flex-end; 交叉轴的终点,垂直方向的底部 / / align-items: baseline; 第一行文字的基线对齐 垂直方向按照子元素所在的位置进行对齐 / / align-items: stretch; 默认值,元素没有设置高度时,自动占满父元素的高度*/
