以下6屬性設定在容器上：
1. flex-direction 決定主軸方向
2. flex-warp 決定一排放不下，如何換行
3. flex-flaw 1和2兩屬性的合併寫法
4. justify-content 定義專案在主軸上的對齊方式
5. align-items 定義專案在交叉軸的對齊方式
6. align-content 定義了多根軸的對齊方式。如果有一根，則不起作用
1.1 flex-direction: | row(自左向右。小數在左邊，預設值)
| row-reverse(自右向左。小數在右邊)
| column(自上到下。小數在上邊)
| column-reverse(自下到上。 小數在下邊);
2.1 flex-warp: | nowrap(不換行。預設值)
| warp(換行)
| warp-reverse(換行。第一行在下方);
3.1 flex-flaw: row nowarp; (1和2屬性的合併寫法，自左向右，不換行)
4.1 justify--content: | flex-start(左對齊。預設值)
| flex-end(右對齊)
| center(居中)
| space-between(分配元素之間。兩端對齊，專案之間間隔相等)
| space-around(分配元素周圍。每個專案兩側的間隔相等)
5.1 align-items: | flex-start(交叉軸起點對齊)
| flex-end(交叉軸終點對齊)
| center(交叉軸中點對齊)
| baseline(專案的第一行文字的基線對齊)
| stretch(如果專案未設定高度，或者設定為auto，將佔滿整個容器高度。預設值)
6.1 align-content: | 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,或px,rem,em等長度值。定義專案佔據的主軸空間，預設為auto。
5 flex: 2,3,4三屬性的合併寫法。如：flex: 0 0 auto;
6 align-self: 調整單個專案與其他專案不一樣的對齊方式，預設值為auto。即繼承父元素的align-items屬性，沒有父元素則為stretch。
align-self: | auto(預設值)
| flex-start(交叉軸起點對齊)
| flex-end(終點對齊)
| center(中點對齊)
| baseline(第一行文字基線對齊)
| strech(佔滿交叉軸);
總結 Flex布局
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...
flex 布局總結
flex 容器的屬性 flex direction 主軸方向 justify content 主軸上 item 的對齊方式 align items 交叉軸上 item 的對齊方式 align content 多根軸上的對齊方式，若只有一根軸，該屬性則不起作用 flex wrap 如何換行item 屬...
flex布局總結
1 flex api簡介 flex direction 指定方向，預設值row flex wrap 一條軸線排不下，如何換行,值 nowrap 不換行 wrap 第一行在上方 wrap reverse flex flow flex direction flex wrap的縮寫 justify con...