Flexbox是一個強大而靈活的佈局，本篇文章主要對其進行學習瞭解。
一、Flexbox簡介
Flexbox佈局（Flexible Box)模組旨在提供一個更加有效的方式制定、調整和分佈一個容器裡的專案佈局，即使他們的大小是未知或者是動態的。簡單的理解，就是可以自動調整，計算元素在容器空間中的大小，並進行有效合理的佈局。
Flexbox佈局中有兩個重要的概念：Flex容器和Flex專案。
Flex容器包含多個Flex專案，通過對Flex容器和Flex專案的具體屬性進行設定，可以達到各種各樣靈活的佈局樣式。
Flexbox使用
Flexbox的使用非常簡單，只需要對Flex容器設定display:flex或者display:inline-flex，就可以具體操作使用Flexbox佈局了。
下面以具體示例演示：
html程式碼
<div class="container">
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</div>
複製程式碼css程式碼
.container {
width: 70%;
height: 500px;
margin:20px auto;
border: 1px solid black;
}
.container .wrap {
display: flex;
border: 3px solid #a448cf;
margin:20px;
width:80%;
height:80%
}
.container .wrap div {
width:150px;
height:150px;
background-color: #c75a5a;
margin:10px;
}
複製程式碼
二、Flex容器
首先介紹下Flex容器的具體屬性以及具體的使用方式。
| 屬性 | 值 | 含義 |
|---|---|---|
| flex-direction | row || column || row-reverse || column-reverse | 控制Flex專案沿著主軸（Main Axis）的排列方向 |
| flex-wrap | wrap || nowrap || wrap-reverse | 控制Flex專案是否換行顯示 |
| flex-flow | row wrap|| row nowrap || column wrap || column nowrap 等 | flex-direction和flex-wrap兩個屬性的組合速記屬性 |
| justify-content | flex-start || flex-end || center || space-between || space-around | 控制 Flex專案在Main-Axis上的對齊方式 |
| align-items | flex-start || flex-end || center || stretch || baseline | 控制Flex專案在Cross-Axis對齊方式 |
| align-content | flex-start || flex-end || center || stretch | 用於多行的Flex容器，控制Flex專案在Cross-Axis對齊方式 |
1. flex-direction
flex-direction屬性控制Flex專案沿著主軸（Main Axis）的排列方向，可以是行（水平）、列（垂直）或者行和列的反向。
預設情況下flex-direction的屬性值是row,具體排列方式如下：
但是當flex-direction的屬性值是column，對應的主軸就應該垂直向下。
具體應用示例如下：
2. flex-wrap
flex-wrap屬性控制Flex專案是否換行。預設情況下，Flex容器會在一行內容納所有的Flex專案，因為flex-wrap屬性的預設值是nowrap，也就是不換行。
具體應用示例如下：
wrap-reverse表示Flex專案在容器中多行排列，只是方向是反的。
3. flex-flow
flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性。
具體不再解釋，看下面示例即可：
4. justify-content
justify-content屬性，控制Flex專案在整個Main-Axis上的對齊方式。
justify-content的預設屬性值是flex-start。
space-between讓flex專案兩端對齊。
space-around讓每個flex專案具有相同的空間
5. align-items
align-items控制Flex專案在Cross-Axis對齊方式。
align-items的預設值是stretch，讓所有的Flex專案高度和Flex容器高度一樣，鋪展開。
baseline讓所有flex專案在Cross-Axis上沿著他們自己的基線對齊。
其中stretch和baseline在不設定具體高度值，才會如上表現，否則會顯示固定的高度。
align-content屬性與align-items作用相同，不過該屬性只針對多行，對單行無效。
三、Flex專案
接下來繼續介紹Flex專案的具體屬性及使用方法。
| 屬性 | 值 | 含義 |
|---|---|---|
| order | 數值 | 根據order值重新排序。從底到高。 |
| flex-grow | 0 || positive number | 控制Flex專案在容器有多餘的空間如何放大 |
| flex-shrink | 0 || positive number | 控制Flex專案在容器 沒有額外空間又如何縮小 |
| flex-basis | auto || % || em || rem || px | 指定Flex專案的初始大小 |
| align-self | auto || flex-start || flex-end || center || baseline || stretch | 控制單個Flex專案在Cross-Axis對齊方式 |
1. order
order允許Flex專案在一個Flex容器中重新排序，屬性預設值是0。
依據order值的大小進行排序，按照值從低到高依次排序。
預設情況下，排序如下：
order:1後，排序如下：
如果，多個Flex專案具有相同的order值，Flex專案重新排序是基於HTML原始檔的位置進行排序。
如下所示，將方塊1和方塊2都設定為order:1。
2. flex-grow 和 flex-shrink
flex-grow和flex-shrink屬性控制Flex專案在容器有多餘的空間如何放大（擴充套件），在沒有額外空間又如何縮小。
flex-grow和flex-shrink 的值可以為 0或者大於0的任何正數。
預設情況下，flex-grow屬性值設定為0，表示Flex專案不會增長，填充Flex容器可用空間。
預設情況下，flex-shrink屬性值設定為1，表示Flex專案會縮小，適應螢幕寬度。
如果把flex-grow的值設定為1，如下所示：
當多個flex專案在一行內，即不換行時，設定不同的flex-grow和flex-shrink 值，對應的空間分配也不同。
flex-grow
將每一個item所設定的 grow 全部加起來，獲得可用空間，然後除以總的grow值，得到單位分配空間。
根據每一個item 設定的 grow 來算，如果一個item 的grow 為 6，那麼 這個 item 在主軸上的尺寸就需要延伸 6*單位分配空間的大小。
flex-shrink
先將所有專案 按照 flex-shrink * item-size 的方式加起來 得到一個加權和，然後計算出 每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 之前的總和。最後每一個item 減去這個 shrink比例 * 負可用空間。
在flex專案有min-width(height)和max-width(height)時，對應的專案要考慮上下限值，把剩餘的伸縮值分配給其他專案。
3. flex-basis
flex-basis指定了 flex 元素在主軸方向上的初始大小，即決定了 flex專案內容的寬或者高（取決於主軸的方向）的尺寸大小。
預設情況，Flex專案的初始寬度由flex-basis的預設值決定，即：flex-basis: auto。Flex專案寬度的計算是基於內容的多少來自動計算。
flex-basis和width/height有一定的優先順序，具體規則如下：
- flex-basis 的優先順序比 width/height 非auto高
- width/height auto優先順序等於 flex-basis，取兩者中的最大值。
4. align-self
align-self 控制單個專案沿著Cross-Axis的對其方式。
除了auto之外，上述示例中flex容器設定了align-itmes：center。
auto 是將目標flex專案的值設定為父元素的 align-items值，或者如果該元素沒有父元素的話，就設定為 stretch。上述示例中align-items：stretch。
四、總結
以上是對flexbox的整體介紹，可以看出其強大與靈活。除此之外，flexbox還有很多其他的特性以及問題，這裡就不再介紹，建議看以下兩篇文章，寫的很好，本文也主要參考了這兩篇文章。
如果想實踐一下對flexbox的掌握，可以試著做百度前端技術學院中的這個作業。