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