設定在容器上面的屬性：
flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
1、flex-direction: row | row-reverse | column | column-reverse;
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。*/
2、flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。*/
3、flex-flow: || ;
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。*/
4、justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。*/
5、align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。*/
6、align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。*/
設定在專案上的屬性：
1、order: ;定義專案的排列順序。數值越小，排列越靠前，預設為0。
2、flex-grow: ;定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
3、flex-shrink:定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
4、flex-basis: | auto;定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
5、 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
6、align-self: auto | flex-start | flex-end | center | baseline | stretch;屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
例子：彈性布局
Flex 布局 容器屬性
flex 布局，意為 彈性布局 任何乙個容器都可以指定為 flex 布局，行內元素也可以使用 flex 布局。注意 設為 flex 布局後，子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素，稱為 flex 容器，簡稱容器 它的所有子元素自...
關於flex布局容器屬性
容器屬性 flex direction 決定主軸的方向 row 從下到上 row reverse 從上到下 column 從左到右 column reverse 從右到左 flex wrap 如果一行排列不下如何換行 nowrap 不換行 wrap 換行 wrap reverse 換行，第一行在下面...
FLEX容器的布局規則
vbox 子元素沿垂直方向排列。每個子元素都會繪製在前乙個子元素的下方。hbox 子元素沿水平方向排列。每個子元素都會繪製在前乙個子元素的右方。canvas 按開發者指定的x座標與y座標繪製子元素。如果沒有指定座標，則所有的子元素都繪製在容器的左上方。例如，如果在canvas中新增乙個button控...