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>