彈性盒子進階2-對齊方式

書接上回，本次說的是彈性盒子的對齊方式

子項在主軸上的對齊方式

<div class="dad">
        <div class="son1">崽1</div>
        <div class="son2">崽2</div>
        <div class="son3">崽3</div>
    </div>

.dad {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            justify-content: start;
            /* justify-content: end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
        }
        
        .dad>div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

justify-content: start; 左對齊，右邊空著，

justify-content: end; 右對齊，左邊空著，

justify-content: center; 居中對齊，兩端空著

justify-content: space-between; 剩余空間平分到子項中間，

justify-content: space-around; 剩余空間平分到子項兩側，

小結

1.主軸方向：橫向（默認），
2.子項彈性：不啟動，
3.剩余寬度：根據樣式分配，

子項在交叉軸上的對齊方式

先說下什么叫交叉軸：簡單來說，就是和主軸垂直的那條軸，恩，很簡單，

<div class="dad">
        <div class="son1">崽1</div>
        <div class="son2">崽2</div>
        <div class="son3">崽3</div>
    </div>

.dad {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            /* justify-content: start; */
            /* justify-content: end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            align-items: baseline;
            align-items: stretch;
        }
        
        .dad>div {
            width: 100px;
            /* height: 100px; */
            border: 1px solid red;
        }
        
        .son2 {
            line-height: 100px;
        }

align-items: flex-start;頂部對齊

align-items: flex-end; 底部對齊

align-items: center; 垂直居中

align-items: baseline;基線對齊（基線就是文字四線三格的那個基線）
ps：我將子項注釋掉的那個高度又加上了 ，這樣看的清楚一點，

align-items: stretch; 高度填滿，
ps：這里將子項的高度注釋掉，然后會發現子項的高度會充滿父框，而不注釋高度時，將按找height的屬性定高，

小結

1.主軸方向：橫向
交叉軸：縱向
2.各個子項有自己的高度（不設定的話會由內容決定，ps：在不啟動彈性項的情況下）
3.不啟動彈性項，
4.根據樣式決定垂直方向的對齊方式，
ps：在主軸和交叉軸方向上的對齊方式可以一起用，自由組合（大概吧，要試的哦），

多行（或多列）時，行交叉軸上的對齊方式，

<div class="dad">
        <div class="son1">崽1</div>
        <div class="son2">崽2</div>
        <div class="son3">崽3</div>
        <div class="son4">崽4</div>
        <div class="son5">崽5</div>
        <div class="son6">崽6</div>
        <div class="son7">崽7</div>
    </div>

.dad {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: stretch;
        }
        
        .dad>div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        
        .son2 {
            line-height: 100px;
        }

align-content: flex-start; 與交叉軸起點對齊

align-content: flex-start; 與交叉軸終點對齊

align-content: center; 與交叉軸中點對齊

align-content: space-between; 與交叉軸兩端對齊，軸線之間的間隔平均分布，

align-content: space-around; 每根軸線兩側的間隔都相等，所以，軸線之間的間隔比軸線與邊框的間隔大一倍，

align-content: stretch; 軸線占滿整個交叉軸，（設定寬度時的表現形式）

align-content: stretch;軸線占滿整個交叉軸，（不設定寬度時的表現形式）

還有一件事

彈性項在不啟動時，是可以設定上下左右auto的，就是說，可以實作上下左右劇中的效果

<div class="dad">
        <div class="son1">崽1</div>
    </div>

 .dad {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
        }
        
        .dad>div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: auto;
        }
        
        .son2 {
            line-height: 100px;
        }

寫在最后的話

雖然很可能這篇博客的訪問量都是我一個人創造的，但是姑且還是說一下，如果你看到了了這篇博客，并且看到了這里，并且和我一樣也是一個正在學習前端的萌新的話，在實際應用這些東西之前，請按照自己的理解實驗一下效果，實際看看這些東西到底是什么，如果我有什么寫的不對的，也歡迎回來噴我，放開噴，沒事，但是要帶著干貨，結束，