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

彈性盒子進階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;
        }

寫在最後的話

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