diaplay:flex
Flex布局的特點:
? 任意方向的伸縮，向左，向右，向下，向上
? 在樣式層可以調換和重排順序
? 主軸和側軸方便配置
? 子元素的空間拉伸和填充
? 沿著容器對齊
伸縮容器
設有display:flex或者display:block的元素就是一個flex Container(伸縮容器)，里面的子元素稱為flex item(伸縮項目)，flex container中子元素都是使用Flex布局排版。
伸縮容器是一個HTML標簽元素，并且display屬性顯式的設置了flex屬性值。在伸縮容器中的所有子元素都會自動變成伸縮項目。設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
?display:block 指定為塊內容器模式，總是使用新行開始顯示，微信小程序的視圖容器(view,scroll-view和swiper)默認都是display:block。
?display:flex:指定為行內容器模式，在一行內顯示子元素，可以使用flex-wrap屬性指定其是否換行，flex-wrap有三個值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)
使用display:block(默認值)的代碼
運行結果是：使用display:block結果：1?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3
使用display:flex后的效果是：123
容器的屬性
Flex布局的伸縮容器可以使用任何方向進行布局。容器默認有兩個軸：主軸(main axis)和側軸(cross axis)。主軸的開始位置為主軸起點(main start)，主軸的結束位置為主軸終點(main end),而主軸的長度為主軸長度(main size)。同理側軸的起點為側軸起點(cross start),結束位置為側軸終點(cross end),長度為側軸長度(cross size)。詳情見下圖:
以下6個屬性可以設置在容器上。
flex-direction ? ? flex-wrap ? ?flex-flow ? ?justify-content ? ? align-items ? ? align-content
（1）flex-direction屬性決定主軸的方向（即項目的排列方向）。
? row :從左到右的水平方向為主軸
? row-reverse：從右到左的水平方向為主軸
? column:從上到下的垂直方向為主軸
? column-reverse從下到上的垂直方向為主軸
如果水平方向為主軸，那個垂直方向就是側軸，反之亦然。四種主軸方向設置的效果圖:
(2)flex-wrap屬性
? ? ?默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
? ? flex-wrap: nowrap | wrap | wrap-reverse;
? （1）nowrap（默認）：不換行。
? （2）wrap：換行，第一行在上方。
? （3）wrap-reverse：換行，第一行在下方。
(3)flex-flow屬性
? ? ?flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
(4)justify-content屬性
? ? justify-content屬性定義了子容器在主軸上的對齊方式。
? ?它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
? ?flex-start（默認值）：左對齊
? ?flex-end：右對齊
? ?center： 居中
? ?space-between：兩端對齊，項目之間的間隔都相等。
? ?space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
每種屬性對應的作用效果如圖所示：
(5)align-items屬性
align-items屬性適用于所有的flex容器，它是用來設置每個flex元素在側軸上的默認對齊方式。align-items和align-content有相同的功能，不過不同點是它是用來讓每一個單行的容器居中而不是讓整個容器居中。
align-items表示側軸上的對齊方式:
? stretch 填充整個容器(默認值)
? flex-start 側軸的起點對齊
? flex-end 側軸的終點對齊
? center 在側軸中居中對齊
? baseline 以子元素的第一行文字對齊
各個屬性對應的布局效果如圖：
(6)align-content屬性
align-content屬性只適用于多行的flex容器，并且當側軸上有多余空間使flex容器內的flex線對齊。
關于align-content和align-items的區別比較：
align-content是針對flex容器里面多軸(多行)的情況,align-items是針對一行的情況進行排列。在元素布局的時候，如果有多個側軸，則align-content生效，如果只有一個側軸，則align-items生效。
(7)align-self是寫在flex的子項屬性上的
align-self 屬性定義flex的子項單獨在側軸（縱軸）方向上的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
