01.设置伸缩盒子(父盒子设置)
//设置伸缩盒子(父盒子设置)
display: flex;
02.调整主轴方向(父盒子设置)
//调整主轴方向(父盒子设置)
flex-direction: row; //默认值 从左向右
flex-direction: row-reverse; // 从右向左
flex-direction: column; //列 由行转为列 从上向下
flex-direction: column-reverse; //列 由行转为列 从下往上显示
03.子元素在主轴方向的对齐方式
//子元素在主轴方向的对齐方式
justify-content: start; //默认值 位于主轴开始位置
justify-content: flex-end; // 位于主轴结束位置
justify-content: flex-center; // 位于主轴中间位置对齐
justify-content: space-around; // 自动调整间隔区域
justify-content: space-between; // 两端对齐
04.子元素在侧轴方向的对齐方式
//子元素在侧轴方向的对齐方式
align-items: stretch; // 默认值 拉伸,与flex-star类似，但是如不设置高度会铺满侧轴
align-items: center; // 侧轴的中间位置对齐
align-items: flex-end; // 侧轴的底部位置对齐
align-items: flex-start; // 侧轴的开始位置对齐
05.设置盒子换行(父盒子设置)
//设置盒子换行(父盒子设置)
flex-wrap: nowrap; //默认值 不换行
flex-wrap: wrap; // 元素换行显示
06.设置盒子换行后的对齐方式
//设置盒子换行后的对齐方式
align-content: stretch; // 默认值 拉伸
align-content: flex-start; // 换行后开始位置对齐
align-content: center; // 换行后中间对齐
align-content: flex-end; // 换行后结束位置对齐
align-content: space-around; // 换行后环绕对齐
align-content: space-between; // 换行后两端对齐
//注意: 该元素必须配合flex-wrap使用;该属性设置的是元素换行后在侧轴对齐方式
07.设置当前子元素在侧轴方向对齐方式
//设置当前子元素在侧轴方向对齐方式
align-self: center; // 设置当前子元素在侧轴方向居中对齐
align-self: flex-end; // 设置当前子元素在侧轴方向结束位置对齐
align-self: flex-start; // 设置当前子元素在侧轴方向开始位置对齐
align-self: stretch; // 设置当前子元素在侧轴方向拉伸
//注意: 该属性是给单独的元素设置在侧轴的对齐方式
08.设置子元素的显示顺序
//设置子元素的显示顺序
order: 5; //值越大排序越往后
09.设置子元素在父元素中的缩放比例
//设置子元素在父元素中的缩放比例
flex: ;//设置子元素在父元素中的缩放比例