簡介
Flex 是 Flexible Box 的縮寫，意為彈性佈局，任何一個容器都可以指定為Flex佈局，包括行內元素，如下：
div{
display: flex;
}
複製程式碼span{
display: inline-flex;
}
複製程式碼注意：
-
Webkit核心的瀏覽器，要加上-webkit-字首； -
設為Flex佈局以後，子元素的
float、clear、vertical-align將會失效； -
設為Flex佈局的容器，都會預設存在兩個軸，水平的
主軸(main axis)和垂直的交叉軸(cross axis)。
一覽無餘
Flex主要分為6個容器屬性和6個專案屬性，見下圖：
下面將詳細介紹以上屬性。
容器的屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
複製程式碼1.flex-direction
作用：主軸的方向，即專案的排列順序
取值：row | row-reverse | column | column-reverse
預設：row
示例：
2.flex-wrap
作用：專案在一條軸線排不下時的換行方式
取值：nowrap | wrap | wrap-reverse
預設： nowrap
示例：
3.flex-flow
作用：flex-direction和flex-wrap的簡寫
取值：<flex-direction> || <flex-wrap>
預設：row nowrap
4.justify-content
作用：專案在主軸上的對齊方式
取值：flex-start | flex-end | center | space-between | space-around
space-between: 兩端對齊，專案之間的間隔都相等；
space-around: 每個專案兩側的間隔相等。
預設： flex-start
示例：
5.align-items
作用：專案在交叉軸上的對齊方式
取值：flex-start | flex-end | center | baseline | stretch
baseline: 專案的第一行文字的基線對齊；
stretch: 如果專案未設定高度或設為auto，將佔滿整個容器的高度。
預設：stretch
示例：
6.align-content
作用：多跟軸線的對齊方式，如果專案只有一根軸線，該屬性不起作用
取值：flex-start | flex-end | center | space-between | space-around | stretch
space-between: 與交叉軸兩端對齊，軸線之間的間隔平均分佈；
space-around: 每根軸線兩側的間隔都相等；
stretch: 軸線佔滿整個交叉軸。
預設：stretch
示例：
專案的屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
複製程式碼1.order
作用：專案的排列順序，數值越小越靠前
取值：<integer>
預設：0
示例：
以item1為例,注意觀察item1的變化。
2.flex-grow
作用：定義專案的放大比例
取值：<number>
如果所有專案該值都為1，則代表等分。
預設：0 (如果存在剩餘空間也不放大)
示例：
以item1為例,注意觀察item1的變化。
3.flex-shrink
作用：專案的縮小比例，即如果空間不足，該專案將縮小
取值：<number>
負值無效；
如果所有專案該值都為1，則代表空間不足時，等比例縮小；
如果一個專案該值為0，其餘都為1，則代表當空間不足時，該專案不縮小。
預設：1
示例：
以item1為例,注意觀察item1的變化。
4.flex-basis
作用：專案佔據的主軸空間
取值：<number>
預設：auto(專案本身的大小)
示例：
以item1為例,注意觀察item1的變化。
5.flex
作用：flex-grow、flex-shrink 和 flex-basis的簡寫
取值：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex-shrink、flex-basis為可選屬性；
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
預設：0 1 auto
常見簡寫：
auto === 1 1 auto
none === 0 0 auto
initial === 0 1 auto
<number> === <number> 1 auto
1 === 1 1 auto
複製程式碼6.align-self
作用：單個專案與其他專案不同的對齊方式，可覆蓋align-items
取值：auto | flex-start | flex-end | center | baseline | stretch
預設：auto(表示繼承父元素的align-items,如果沒有父元素，則等同於stretch)
示例：
以item1為例,注意觀察item1的變化。
參考
小結
本文主要介紹了flex基礎佈局的6個容器屬性與專案屬性，並附有超Q示例。順帶推薦FlexBox Froggy給大家練習（也就是本文示例?的大?）。
感謝閱讀，如有問題，歡迎指正。