flex布局（flex-warp 设置子元素是否换行 align-items设置侧轴上的子元素排列方式（单行） align-content（多行）flex-flow是flex-direction和flex-wrap的复合写法）

flex-wrap`设置子元素是否换行

​ nowrap默认不换行，如果撞不开缩小子元素宽度。

​ wrap换行

        div {
            display: flex;
            /* 默认不换行 */
            flex-wrap: nowrap;
            /* 换行 */
            flex-wrap: wrap;
            width: 500px;
            height: 300px;
            background-color: pink;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: azure;
        }

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>3</span>
    </div>

align-items设置侧轴上的子元素排列方式（单行）

​ flex-start 从上到下

​ flex-end 从下到上

​ center挤在一起居中（垂直居中）

div {
            display: flex;
            /* 把默认row轴x轴写出来了 */
            flex-direction: row;
            /* 控制主轴的x轴的子元素排列方式 */
            justify-content: center;
            /* 侧轴Y轴的排列方式，紧贴上侧 */
            align-items: flex-start;
            /* 紧贴下侧 */
            align-items: flex-end;
            /* 居中 */
            align-items: center;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: azure;
            margin: 10px;
        }

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>3</span>
    </div>

stretch 拉伸（默认）

拉伸是不能给子盒子高度

div {
            display: flex;
            /* 拉伸 */
            align-items: stretch;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        span {
            width: 150px;
            background-color: purple;
            color: azure;
            margin: 10px;
        }

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>3</span>
 </div>

align-content设置侧轴上的子元素的排列方式（多行）在多行和换行的情况下使用

​ flex-start 默认值在侧轴的头部开始

​ flex-end 在侧轴的尾部开始排列

​ center 在侧轴中间显示

​ space-around子项在侧轴平分剩余空间

​ space-between 子项在侧轴先分布两头，在平分中间空间

​ stretch 设置子项元素高度平分元素高度

div {
            display: flex;
            /* 默认x轴 */
            flex-direction: row;
            /* 盒子需要排列换行 */
            flex-wrap: wrap;
            /* x轴排列两侧贴近平均分 */
            justify-content: space-between;
            /* Y轴排列居中 */
            align-content: center;
            /* Y轴向上排列 */
            align-content: flex-start;
            /* Y轴向下排列 */
            align-content: flex-end;
            /* Y轴平均分配空间 */
            align-content: space-around;
            /* 两侧贴近平均分配空间 */
            align-content: space-between;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: azure;
            margin: 10px;
        }

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        
    </div>

flex-flow复合属性，相当于同时设置了flex-direction和flex-wrap

div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* 单独写法 */
            flex-direction: column;
            flex-wrap: wrap;
            /* 复合写法 */
            flex-flow: column wrap;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: azure;
        }

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span> 
    </div>