Flex是Flexible Box的縮寫，意爲彈性佈局，用來爲盒子模型提供最大的靈活性、任何一個容器都可以指定爲Flex佈局。本篇博客全面的講解了Flex佈局的屬性，快速入門Flex佈局，那麼接下來我們談談CSS Flexbox彈性佈局。
首先要有個容器，並設置display:flex;display:-webkit-flex;該容器有以下六個屬性：
flex-direction (元素排列方向)
row, row-reverse, column, column-reverse
flex-wrap (換行)
nowrap, wrap, wrap-reverse
flex-flow (以上兩者的簡寫)
flex-direction || flex-wrap
justify-content (水平對齊方式)
flex-start, flex-end, center, space-between, space-around
align-items (垂直對齊方式)
stretch, flex-start, flex-end, center, baseline
align-content (多行垂直對齊方式)
stretch, flex-start, flex-end, center, space-between, space-around
項目的屬性：
order 排列順序，數值，默認0
"integer"
flex-grow 如圖示7，定義放大比例，默認0，即如果存在剩餘空間，也不放大。
"number"
flex-shrink 如圖示8，定義縮小比例，默認1，如果所有項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。
"number"
flex-basis 定義項目佔據的主軸空間，默認auto。會根據flex-direction定義的主軸（水平或者垂直），定義項目本來的大小，跟width或者height一樣。
flex 推薦，以上三個的縮寫，默認 0 1 auto
"flex-grow" "flex-shrink" "flex-basis"
align-self 如圖示9，單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items
"auto","flex-start","flex-end","center","baseline","stretch"
1.flex-direction
row (從左往右)默認
row-reverse (從右往左)
column (從上往下)
column-reverse (從下往上)
2.flex-wrap
nowrap (不換行)默認
wrap (換行，且往下一行換)
wrap-reverse (換行，且往上一行換)
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
3.flex-flow，是flex-direction和flex-wrap的簡寫形式
flex-flow:<flex-direction> || <flex-wrap>;
4.justify-content
flex-start
flex-end
center
space-between
space-around
5.align-items
stretch 默認
flex-start
flex-end
center
baseline 項目第一行文字的基準線對齊
6.align-content
stretch 默認
flex-start
flex-end
center
space-between
space-around
項目屬性：Flex項目有6個可用屬性
1. order
定義項目的排列順序。數值越小，排列越靠前，默認爲0：order: <integer>;
.item {
order: <integer>;
}
2. flex-grow
定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大: flex-grow: <number>;
如果所有項目的flex-grow屬性都爲1，則它們將等分剩餘空間（如果有的話）。
如果一個項目的flex-grow屬性爲2，其他項目都爲1，則前者佔據的剩餘空間將比其他項多一倍。
.item {
flex-grow: <number>; /* default 0 */
}
3. flex-shrink
定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小: flex-shrink: <number>;
如果所有項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。
如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。
負值對概述行無效。
.item {
flex-shrink: <number>; /* default 1 */
}
4. flex-basis
定義了在分配多餘空間之前，項目佔據的主軸空間（main size）: flex-basis: <length>;
瀏覽器根據這個屬性，計算主軸是否有多餘空間。
它的默認值爲auto，即項目的本來大小。
可以設爲跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。
.item {
flex-basis: <length> | auto; /* default auto */
}
5. flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，後兩個屬性可選: flex: none | <> | <>;
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因爲瀏覽器會推算相關值。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
6. align-self
允許單個項目有與其他項目不同的對齊方式: align-self: auto | flex-start | flex-end | center | baseline | stretch;
默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
以上就是Flex佈局的詳細介紹，本編博客參考了阮一峯的博客。