伸縮屬性

 伸縮佈局：在可伸縮的容器裏設置 

 第一個屬性（必須設置）-- display:flex；

1.默認狀況下若是伸縮容器的一行放不下全部的伸縮項，那麼系統會自動等比壓縮全部的伸縮項。

2.在伸縮容器中有一個叫作flex-wrap屬性，專門用於控制放不下是否須要換行的，默認取值:flex-wrap 不換行/ wrap：放不下就換行，而不是等比壓縮/ wrap-reverse：放不下就換行，以行爲單位進行反轉。

 

第二個屬性：align-content ---- 專門用於設置換行以後的對齊方式。（側軸默認是Y軸）

注意點：只有伸縮項發生了換行這個屬性纔有效。

flex-start：換行以後和側軸的起點對齊，一行接一行。

flex-end：換行以後和側軸的終點對齊，將全部換行以後的內容當作一個總體來操做。

center：換行以後和側軸的中點對齊。

space-between：換行以後在側軸的兩端對齊。

space-around：換行以後在側軸的環繞對齊。

stretch：以行爲單位進行拉伸，拉伸的部分以空白填充，保證拉伸以後全部的行加起來可以填滿側軸。

 

第三個屬性：order：0；-- 專門用於來對伸縮項進行排序的。

默認狀況下每個伸縮項都有一個order屬性，用於決定排序的前後順序，默認狀況下全部的伸縮項的order屬性的取值都是0。咱們能夠經過修改order屬性的取值來實現伸縮項的排序。排序的規則：從小到大的排序，越小的顯示在越前面。

 

第四個屬性：flex-grow  --- 用於控制當全部伸縮項的寬度總和小於伸縮容器寬度的時候如何擴充本身，以便於全部伸縮項寬度的總和可以填滿整個伸縮容器。

默認狀況下flex-grow的取值是0，表示咱們設置的寬度是多少就按照多少來顯示，不進行任何的擴充。

注意點：只有當全部伸縮項的寬度總和小於伸縮容器寬度的時候這個屬性纔有效。

flex-grow擴充的公式：

1.利用伸縮容器寬度-全部伸縮項的寬度 = 剩餘空間 600 - 300 = 300

2.利用剩餘空間 / 全部須要擴充份數的總和 = 每一份的大小

300 / (1 + 4 + 8) = 23.07

 

來自爲知筆記(Wiz)