CSS-伸縮佈局

主軸：預設水平方向
側軸：預設垂直方向
這兩個軸的方向都是可變的，可通過flex-direction來變更，如果將主軸變為垂直方向，那麼側軸會自動變為水平方向

哪個父盒子需要自身的內容自動伸縮排布，就設定display:flex屬性：

1、父盒子裡面的盒子可以通過flex屬性來指定劃分父盒子的份數

子盒子可以不設寬高度，那麼預設佔父元素的全部高度和根據分數充滿父元素的寬度（如果主軸方向是水平的，也就是父元素裡面的元素水平排布，那麼就算給子元素新增寬度也無效，因為他會按照分數充滿整個父元素）

<div class="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
</div>


.content {
            width: 80%;
            height: 400px;
            border: 1px red solid;
            margin: 30px auto;
            display: flex;/*將該盒子設為伸縮佈局*/
}

.item {/*子盒子不設高度，那麼在這裡預設佔父元素的全部高度*/
    background: pink;
    float: left;
}
.item:nth-child(1){         
    flex: 1;  /*佔一份*/
}
.item:nth-child(2){         
    flex: 2;  /*佔一份*/
}
.item:nth-child(3){         
    flex: 3;  /*佔一份*/
}

預設情況下主軸是水平方向，設定主軸為垂直方向：flex-direction: column;

給父元素新增flex-direction：column後

image.png

2、上面我們在子盒子中用了flex屬性設定了子盒子佔據父盒子的份數，現在講講justify-content屬性（）:調整主軸對齊

這個屬性是給父盒子新增的,新增了這個屬性就不要給子盒子新增flex屬性了哦

justify-content:
取值：
flex-start：伸縮專案向一行的起始位置靠齊。
flex-end：伸縮專案向一行的結束位置靠齊。
center：伸縮專案向一行的中間位置靠齊。
space-between：伸縮專案會平均地分佈在行裡。第一個伸縮專案一行中的最開始位置，最後一個專案在一行中最終點位置。
space-around：伸縮專案會平均地分佈在行裡，兩端保留一半的空間。（每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。）

image.png

當justify-content:flex-start;

當justify-content:flex-end;

當justify-content:space-between;

當justify-content:space-around;

當justify-content:center;

---

3、側軸對齊align-items:（因為當前的主軸方向是水平方向，所以現在側軸方向是豎直方向）

這個屬性是給父盒子新增的,新增了這個屬性就不要給子盒子新增flex屬性了哦
側軸對齊。 align-items 屬性定義專案在伸縮容器的當前行的側軸（垂直於主軸）上的對齊方式。

align-items:
flex-start：伸縮專案在側軸起點邊的外邊距緊靠住該行在側軸起始邊。（側軸的起點對齊。）
flex-end：伸縮專案在側軸終點邊的外邊距緊靠住該行在側軸終點邊。（側軸的終點對齊。）
center：伸縮專案的外邊距盒在該行的側軸上居中放置。（側軸的中點對齊。）
stretch：預設值，伸縮專案拉伸填充整個容器。（如果專案未設定高度，將佔滿整個容器的高度。）

注意:以下測試給三個子元素設定了width: 150px;height: 200px;

當align-items: flex-start;

image.png

當align-items: flex-end;

image.png

當aling-items:center時

image.png

4、align-content屬性（與align-items屬性很相似）

align-content屬性定義了多根軸線（即多行）的對齊方式。如果專案只有一根軸線，該屬性不起作用。
因為這個屬性在多行情況下才生效，所以必須設定flex-wrap:wrap屬性

align-content：
取值：
flex-start ：各行向伸縮容器的起點位置堆疊。
flex-end ：各行向伸縮容器的結束位置堆疊。
center ：各行向伸縮容器的中間位置堆疊。
space-between ：各行在伸縮容器中平均分佈。
space-around ：各行在伸縮容器中平均分佈，在兩邊各有一半的空間。

5、flex-wrap:是否換行

預設情況下，專案都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，是否需要換行?
取值：

nowrap（預設）：不換行，強制一行顯示，會收縮每個項的寬度（即使給每個項指定了寬度）。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方（較少使用）。

6、 order屬性

order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
比如有三個專案，想把最後一個專案放在最前面，這時候可以設定order:-1,想放在最後面可以設定order:1