display flex容器的屬性
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
flex-direction屬性
flex-direction屬性決定主軸的方向（項目的排練方式）。
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
flex-wrap屬性
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
（1）nowrap（默認）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
justify-content屬性
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
align-items屬性
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
伸縮容器
設有display:flex或者display:block的元素就是一個flex container(伸縮容器)，里面的子元素稱為flex item(伸縮項目)， flex container中子元素都是使用Flex布局排版。
display:block 指定為塊內容器模式，總是使用新行開始顯示，微信小程序的視圖容器(view,scroll-view和swiper)默認都是dispaly:block。
display:flex:指定為行內容器模式，在一行內顯示子元素，可以使用flex-wrap屬性指定其是否換行，flex-wrap有三個值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)
原文鏈接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
作者：小二郎_Ejun
鏈接：https://www.jianshu.com/p/1fd1f129ee29/
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。