主轴对齐方式 快捷键 jc 默认值 主轴从起点开始排列
/* 默认值 主轴从起点开始排列 */
/* justify-content: flex-start; */
/* 主轴从终点开始排列 */
/* justify-content: flex-end; */
/* 居中 */
/* justify-content: center; */
/* 间距出现在子级盒子之间 */
justify-content: space-between;
/* 父子级之间都有相同的间距 */
/* justify-content: space-evenly; */
/* 间距出现在子级两侧 */
/* 视觉效果: 子级之间的间距是父级左右两侧间距的2倍 */
/* justify-content: space-around; */
侧轴对齐方式 快捷键ai 侧轴（默认y 轴）拉伸, 默认值 高和父元素保持一致，宽度由内容撑开
/* 拉伸, 默认值 高和父元素保持一致，宽度由内容撑开 / / align-items: stretch; */
/* 侧轴居中 */
align-items: center;
/* 侧轴上方开始排列 */
/* align-items: flex-start; */
/* 侧轴下方开始排列 */
/* align-items: flex-end; */
/* 主轴居中 */
justify-content: center;
伸缩比 所谓伸缩比，就是子元素在父元素内的面积的几份
注意点： 1.伸缩比划分的是父元素的大小 2.伸缩比是给子元素设置的 3.伸缩比会覆盖你的宽度
.box div:nth-child(2) {
flex: 2;
}
.box div:nth-child(3) {
flex: 1;
}
圣杯布局：两边固定宽高，中间自适应 flex 排列方向 注意：所有关于 flex 相关的，都要开启flex容器，才能生效
flex-direction: column; 垂直方向排列
flex-direction: row; 主轴默认水平排列
display: flex;
/* 主轴默认水平排列 */
flex-direction: row;
/* 垂直方向排列 */
flex-direction: column;
/* 转变为垂直居中 */
justify-content: center;
/* 转变为水平居中 */
align-items: center;
/* 水平方向从右向左排列 */
/* flex-direction: row-reverse; */
/* 垂直方向从下到上排列 */
/* flex-direction: column-reverse; */
flex-wrap:wrap; 换行
换行
flex-wrap:wrap;
默认值，不换行
flex-wrap:no-wrap;
反向换行
flex-wrap:wrap-reverse;
flex多行侧轴排列 flex多行侧轴排列 ，前提条件是flex布局换行（flex-wrap:wrap;）多行侧轴排列才会生效
/* 换行 */
flex-wrap: wrap;
/* 单行侧轴居中 */
align-items: center;
/* 多行侧轴居中（前提条件是flex布局换行）快捷键 ac */
/* 多行居中 */
/* align-content:center; */
/* 多行从起点开始排列 */
align-content: flex-start;
/* 多行从终点开始排列 */
/* align-content: flex-end; */
/* 上下靠边 */
/* align-content: space-between; */
/* 上下 1:2 */
/* align-content: space-around; */
/* 上下 1:1 */
/* align-content: space-evenly; */
