1、Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

flex布局

.container { display: flex; /* or inline-flex */ }

Flex六個屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2、flex-direction屬性

flex-direction屬性

.container { flex-direction: row | row-reverse | column | column-reverse; } 
row（默認(rèn)值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。 
column：主軸為垂直方向，起點在上沿。 
column-reverse：主軸為垂直方向，起點在下沿。

3、flex-wrap屬性

flex-wrap屬性

.container{ flex-wrap: nowrap | wrap | wrap-reverse; } 
nowrap（默認(rèn)）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

4、flex-flow 屬性（是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap）

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

5、justify-content屬性

justify-content屬性

.container { justify-content: flex-start | flex-end | center 
                 | space-between | space-around | space-evenly; } 
flex-start（默認(rèn)值）：左對齊 
flex-end：右對齊 
center： 居中 
space-between：兩端對齊，項目之間的間隔都相等。 
space-around：每個項目兩側(cè)的間隔相等。項目之間的間隔比項目與邊框的間隔大一倍。 
space-evenly：物品的分布使得任何兩個物品之間的間距（以及到邊緣的空間）相等。 
space-evenly在微信PC端和IE瀏覽器打開會有失效。

6、align-items屬性

align-items屬性

.container { align-items: stretch | flex-start | flex-end | center | baseline; } 
flex-start：交叉軸的起點對齊。 
flex-end：交叉軸的終點對齊。 
center：交叉軸的中點對齊。 
baseline: 項目的第一行文字的基線對齊。 
stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。

7、align-content屬性

align-content屬性

.container { align-content: flex-start | flex-end | center 
                 | space-between | space-around | stretch; } 
flex-start：與交叉軸的起點對齊。 
flex-end：與交叉軸的終點對齊。 
center：與交叉軸的中點對齊。 
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。 
space-around：每根軸線兩側(cè)的間隔都相等，軸線之間的間隔比軸線與邊框的間隔大一倍。 
stretch（默認(rèn)值）：軸線占滿整個交叉軸。

8、order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

order屬性

.item { order: <integer>; /* default is 0 */ }

9、flex-grow屬性定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

flex-grow屬性

.item { flex-grow: <number>; /* default 0 */ }

10、flex-shrink

.item { flex-shrink: <number>; /* default 1 */ }

11、flex-basis

.item { flex-basis: <length> | auto; /* default auto */ }

12、flex

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }