flex 弹性布局

display: flex ;  开启flex布局，将当前元素设置为弹性容器

主轴对齐方式 快捷键 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; */