[TOC] # 彈性布局詳解 彈性布局使容器能夠更加彈性的對子元素進行布局，能夠靈活的設置資源的大小比例、間距、對齊方式等。 對于容器元素，設置 `display: flex`或`display:inline-flex`即可使之成為彈性盒子，使子元素可以彈性布局。  ## 對于容器 彈性布局主要使用到以下屬性： ### flext-direction 設置主軸的方向，有`row`, `column`, `row-revers`, `column-reverse`四個值，默認`row`. 各個值的表現如圖所示：  ### justify-content 主軸方向對子元素進行排列。有`flex-start`、`flext-end`、`center`、`space-between`，`space-around`五個值。默認`flex-start`。**需要注意的是，當子元素總寬度之和超出容器寬度且不換行時時，`space-between`表現和`flex-start`一致.**  ### flex-wrap 子元素總寬度（或高度，取決于`flex-direction`）大于容器的寬度（或高度）時，子元素排列是否換行。有`nowrap`（不換行，子元素會一直在主軸方向排列，即使超出容器寬度），`wrap`(換行)，`wrap-reverse`(換行，但是交叉軸方向逆向排列)3個可選值。默認`nowrap`。 ### align-items 交叉軸方向對子元素進行排列。有`flex-start`,`center`,`flex-end`,`baseline`,`stretch`5個值，默認`stretch`。前3個值表現和`justify-content`類似，`baseline`是第一行文字底部對齊，`stretch`是將子元素撐到父元素的高度(或寬度)。**需要注意的是，在換行的情況下，`center`表現類似`space-around`。**  ### align-content 針對多行多列的情況對交叉軸方向行（或列）進行布局，對單行無效。取值和`justify-content`一樣，相應的表現也與其一致，只不過針對的是交叉軸方向。  ## 針對子元素 彈性盒子里面的子元素可以設置自己的屬性，用以定義自己順序，位置，寬度占比，空間不足的情況下的處理方式，跟彈性布局有關的有以下屬性： ### order 定義子元素的順序，默認是0，數字越小，子元素在容器中的順序越靠前。 ```html <div style="display:flex"> <div style="order: 1">Child 1</div> <div style="order: 2;">Child 2</div> <div>Child 3</div> </div> ```  ### flex-basis 設置元素寬度，它設置之后元素的寬度時彈性的，最大不會超過他應占寬度比例。比如一個300寬度的容器，有三個子元素，他們的`flex-basis`設置成100,200,100, 那么布局之后最終三個元素的寬度則變成75,150,75. ### flex-grow 定義了剩余空間的分配占比，默認為0， 即不縮放，小于0無效，會被默認成0。子元素的寬度計算方式如下：父容器寬度減去所有子元素的基準寬度，如果有剩余空間，將剩余空間按比例分配到flex-grow不為0的元素上。 ```html <div class='flex-row'> <div style="flex-grow: -1;"> -1</div> <div style="flex-grow: 0;"> 0</div> <div style="flex-grow: 1;">1</div> <div style="flex-grow: 2;">2</div> </div> ```  以本圖舉例：容器寬度(width)為300，四個元素每個元素的margin是5， -1、0、1、2這4元素的分別自然寬度是20、10、10、10，那么現在每個元素的基準寬度時30,20,20,20, 剩余可分配空間為210，因此可以分配到70，那么1這個元素盒子及margin的總寬度為90，同理，2為160. ### flex-shirink 定義了子元素寬度之和超出父容器寬度部分的處理規則，默認值是1。子元素的寬度計算方式如下：所有子元素基準值之和減去容器的寬度，如果值是正數，每個元素的寬度為基準值減去flex-shrink所占的比例。 ```html <div class='flex-row'> <div style="flex-shrink: 1;"> -1</div> <div style="flex-shrink: 1;"> 0</div> <div style="flex-shrink: 2">1</div> <div style="flex-shrink: 2;">2</div> </div> ```  以本圖舉例： 容器寬度為300，每個子元素的基準寬度(flex-basis)是100，子元素的總寬度是400，超出100. 參與分配超出寬度的總份數書1+1+2+2=6, 所以-1,0兩個元素的的寬度是 100-100(超出部分) * 1/6 = 83.33, 1,2兩個元素的寬度時 100 - 100 * 2/6 = 66.67. ### align-self 定義單個子元素的對齊方式，可取值和`align-items`一致，默認值`auto`，即使用父元素`align-items`聲明的對齊方式。