參考：
語法：
一、Flex 布局是什么？
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為 Flex 布局。
.box{ display: flex; }行內元素也可以使用 Flex 布局。
.box{ display: inline-flex; }Webkit 內核的瀏覽器 (蘋果系統），必須加上
-webkit前綴。.box{ display: -webkit-flex; /* Safari */ display: flex; }注意，設為 Flex 布局以后，子元素的
float、clear和vertical-align屬性將失效。二、基本概念
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做
main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做
main size，占據的交叉軸空間叫做cross size。三、容器的屬性
以下6個屬性設置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）。.box { flex-direction: row | row-reverse | column | column-reverse; }
它可能有4個值。
row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。1、不用flex布局
1 <!--pages/index/index.wxml--> 2 <view class="container"> 3 4 <view class="txt01"> 5 <text >pages</text> 6 </view> 7 8 <view class="txt02"> 9 <text >pages</text> 10 </view> 11 12 <view class="txt03"> 13 <text >pages</text> 14 </view> 15 16 <view class="txt04"> 17 <text >pages</text> 18 </view> 19 20 </view> 21 /* pages/index/index.wxss */ 22 .txt01{ 23 width: 150rpx; 24 height: 150rpx; 25 background-color: red; 26 } 27 .txt02{ 28 width: 150rpx; 29 height: 150rpx; 30 background-color: green; 31 } 32 .txt03{ 33 width: 150rpx; 34 height: 150rpx; 35 background-color: blue; 36 } 37 .txt04{ 38 width: 150rpx; 39 height: 150rpx; 40 background-color: yellow; 41 }
2、加上flex-direction
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; // 默認row 5 } 6 。。。。。。。。
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; // 5 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row-reverse; 5 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column-reverse; 5 }
3.2 flex-wrap屬性
默認情況下，項目都排在一條線（又稱"軸線"）上。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }它可能取三個值。
（1）
nowrap：默認值，表示不換行，如果單行內容過多，項目寬度可能會被壓縮
（2）
wrap：換行，第一行在上方。
（3）
wrap-reverse：換行，第一行在下方。
3、加上flex-wrap
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-wrap: nowrap //默認，不換行 自動調整 5 } 6 。。。。。。。。。。
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; //縱向 5 flex-wrap: nowrap; 6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-wrap: wrap; //換行 5 } 6 。。。。。
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; 5 flex-wrap: wrap; 6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-wrap: wrap-reverse; //換行 逆 5 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; 5 flex-wrap: wrap-reverse; 6 }
3.3 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。.box { flex-flow: <flex-direction> || <flex-wrap>; }4、加上flex-flow
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-flow: row nowrap // 相當於：flex-direction:row; flex-wrap:nowrap 5 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-flow: row wrap //相當於 flex-direction:row; flex-wrap:wrap 5 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-flow: row wrap-reverse // 相當於flex-direction:row;flex-wrap:wrap-reverse 5 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-flow: column nowrap //相當於：flex-direction：column; flex-wrap:nowrap 5 } 6 。。。。。。。 7 /* pages/index/index.wxss */ 8 .container{ 9 display: flex; 10 flex-flow: column wrap //相當於：flex-direction：column; flex-wrap:wrap 11 } 12 。。。。。。。 13 /* pages/index/index.wxss */ 14 .container{ 15 display: flex; 16 flex-flow: column wrap-rever //相當於:flex-direction:column;flex-wrap:wrap-reverse 17 }3.4 justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式，以及分配項目之間及其周圍多余的空間.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
flex-start:默認值，表示項目對齊主軸起點，項目間不留空隙
center:項目在主軸上居中排列，項目間不留空隙。主軸上第一個項目離主軸起點的距離等於最后一個項目離主軸終點的距離
flex-end：項目對齊主軸終點，項目間不留空隙
space-between：項目間距相等，第一個和最后一個項目分別離起點/終點的距離為0
space-around：與space-between相似，不同之處為第一個項目離主軸七點和最后一個項目離終點的距離為中間項目間距的一半
5、加上justify-content 定義了項目在主軸上的對齊方式
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 justify-content: flex-start // 項目對齊主軸起點，項目間不留空隙6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 justify-content: flex-end // 項目對齊主軸起點，無間隙
6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 justify-content: center //居中，無間隙，主軸上第一個項目離主軸起點的距離等於最后一個項目離主軸終點的距離 6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 justify-content: space-between //兩端對齊，第一個和最后一個項目分別離起點/終點的距離為0 6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 justify-content: space-around //每個項目兩側的間隔相等，第一個項目離主軸七點和最后一個項目離終點的距離為中間項目間距的一半 6 }
3.5 align-items屬性
align-items屬性定義項目在交叉軸上如何對齊。.box { align-items: flex-start | flex-end | center | baseline | stretch; }
它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基線對齊。stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。6、加上align-items 定義項目在交叉軸上如何對齊
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction:column;5 align-items: flex-start; //交叉軸的起點對齊 6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; 5 align-items: flex-end;//交叉軸的終點對齊6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; 5 align-items: center //交叉軸的中點對齊6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; 5 align-items: baseline; //項目的第一行文字的基線對齊 6 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; 5 align-items: stretch; // 如果項目未設置高度或設為auto，將占滿整個容器的高度 6 } 7 .txt01{ 8 /* width: 200rpx; */ 9 height: 200rpx; 10 background-color: red; 11 } 12 .txt02{ 13 /* width: 200rpx; */ 14 height: 200rpx; 15 background-color: green; 16 } 17 .txt03{ 18 /* width: 200rpx; */ 19 height: 200rpx; 20 background-color: blue; 21 }
3.6 align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
該屬性可能取6個值。
flex-start：首行在交叉軸起點開始排列，行間不留間距flex-end：與交叉軸的終點對齊尾行在交叉軸終點開始排列，行間不留間距center：行在交叉軸終點開始排列，行間不留間距，首行離交叉軸起點和行尾離交叉軸終點的距離相等space-between：行間間距、首行離交叉軸起點和尾行離交叉軸終點的距離相等space-around：行與行間距相等，首行離交叉軸起點和尾行離交叉軸終點的距離為行與行間間距的一半。stretch：默認值，未設置項目尺寸時將各行中的項目拉伸至填滿交叉軸。當設置了項目尺寸時項目尺寸不變，項目行拉伸至填滿交叉軸加上align-content ：用於多行排列時設置項目在交叉軸方向上的對齊方式，以及分配項目之間及其周圍多余的空間。
/* pages/index/index.wxss */ .container{ display: flex; flex-direction: row; align-content: flex-start; flex-wrap: wrap; } .txt01{ /* align-self: flex-start; */ width: 200rpx; height: 200rpx; background-color: red; } .txt02{ /* align-self: flex-end; */ width: 200rpx; height: 200rpx; background-color: green; } .txt03{ /* align-self: flex-start; */ width: 500rpx; height: 200rpx; background-color: blue; } .txt04{ /* flex: none; */ width: 300rpx; height: 200rpx; background-color: yellow; } .txt05{ /* flex-shrink: 1; */ width: 300rpx; height: 200rpx; background-color:greenyellow; }
/* pages/index/index.wxss */ .container{ height: 100vh; display: flex; flex-direction: row; align-content: flex-end; flex-wrap: wrap; } 。。。。。。。。
/* pages/index/index.wxss */ .container{ height: 100vh; display: flex; flex-direction: row; align-content: center; flex-wrap: wrap; } 。。。。。
/* pages/index/index.wxss */ .container{ height: 100vh; display: flex; flex-direction: row; align-content: space-around; flex-wrap: wrap; } 。。。。。。
/* pages/index/index.wxss */ .container{ height: 100vh; display: flex; flex-direction: row; align-content: space-between; flex-wrap: wrap; } 。。。。。。。。。。。
四、項目的屬性
以下6個屬性設置在項目上。
orderflex-growflex-shrinkflex-basisflexalign-self4.1 order屬性
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。.item { order: <integer>; }
4.2 flex-grow屬性
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。.item { flex-grow: <number>; /* default 0 */ }
如果所有項目的
flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。4.3 flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。.item { flex-shrink: <number>; /* default 1 */ }
如果所有項目的
flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。
4.4 flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。.item { flex-basis: <length> | auto; /* default auto */ }它可以設為跟
width或height屬性一樣的值（比如350px），則項目將占據固定空間。4.5 flex屬性
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }該屬性有兩個快捷值：
auto(1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
4.6 align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
項目屬性
1、
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 flex-wrap: wrap; 6 } 7 .txt01{ 8 order: 2; 9 width: 200rpx; 10 height: 200rpx; 11 background-color: red; 12 } 13 .txt02{ 14 order: 1; 15 width: 200rpx; 16 height: 200rpx; 17 background-color: green; 18 } 19 .txt03{ 20 order: 0; 21 width: 200rpx; 22 height: 200rpx; 23 background-color: blue; 24 } 25 .txt04{ 26 order: 4; 27 width: 200rpx; 28 height: 200rpx; 29 background-color: yellow; 30 } 31 .txt05{ 32 order: 5; 33 width: 300rpx; 34 height: 300rpx; 35 background-color: snow; 36 }
2、
flex-grow屬性定義項目的放大比例，默認為
0，即如果存在剩余空間，也不放大。如果所有項目的
flex-grow屬性都為0，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為1，其他項目都為0，則前者占據的剩余空間將比其他項多一倍。1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 flex-wrap: wrap; 6 } 7 .txt01{ 8 flex-grow: 0; 9 width: 200rpx; 10 height: 200rpx; 11 background-color: red; 12 } 13 .txt02{ 14 flex-grow: 1; 15 width: 200rpx; 16 height: 200rpx; 17 background-color: green; 18 } 19 .txt03{ 20 flex-grow: 0; 21 width: 200rpx; 22 height: 200rpx; 23 background-color: blue; 24 }
3、
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
如果所有項目的
flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。 負值對該屬性無效1 rap: nowrap; 2 } 3 .txt01{ 4 flex-shrink: 1; 5 width: 200rpx; 6 height: 200rpx; 7 background-color: red; 8 } 9 .txt02{ 10 flex-shrink: 0; 11 width: 200rpx; 12 height: 200rpx; 13 background-color: green; 14 } 15 .txt03{ 16 flex-shrink: 1; 17 width: 200rpx; 18 height: 200rpx; 19 background-color: blue; 20 } 21 .txt04{ 22 flex-shrink: 1; 23 width: 200rpx; 24 height: 200rpx; 25 background-color: yellow; 26 } 27 .txt05{ 28 flex-shrink: 1; 29 width: 300rpx; 30 height: 300rpx; 31 background-color: snow; 32 }
4、
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為
auto，即項目的本來大小。1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 flex-wrap: nowrap; 6 } 7 .txt01{ 8 flex-basis: auto; 9 /* width: 200rpx; 10 height: 200rpx; */ 11 background-color: red; 12 } 13 .txt02{ 14 flex-basis: auto; 15 /* width: 200rpx; 16 height: 200rpx; */ 17 background-color: green; 18 } 19 .txt03{ 20 flex-basis: 350rpx; 21 /* width: 200rpx; 22 height: 200rpx; */ 23 background-color: blue; 24 }
5、flex
屬性是
flex-grow,flex-shrink和flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。該屬性有兩個快捷值：
auto(1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 flex-wrap: nowrap; 6 } 7 .txt01{ 8 flex:0 1 auto; // flex-grow:0;flex-shrink:1;flex-basis:auto 9 width: 200rpx; 10 height: 200rpx; 11 background-color: red; 12 } 13 .txt02{ 14 flex: 0 1 auto; 15 width: 200rpx; 16 height: 200rpx; 17 background-color: green; 18 } 19 .txt03{ 20 flex: 0 1 auto; 21 width: 200rpx; 22 height: 200rpx; 23 background-color: blue; 24 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 flex-wrap: nowrap; 6 } 7 .txt01{ 8 flex:auto; // flex-grow:1;flex-shrink:1;flex-basis:auto 9 width: 200rpx; 10 height: 200rpx; 11 background-color: red; 12 } 13 .txt02{ 14 flex: auto; 15 width: 200rpx; 16 height: 200rpx; 17 background-color: green; 18 } 19 .txt03{ 20 flex: auto; 21 width: 200rpx; 22 height: 200rpx; 23 background-color: blue; 24 }
1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: row; 5 flex-wrap: nowrap; 6 } 7 .txt01{ 8 flex:none; // flex-grow:0;flex-shrink:0;flex-basis:auto 9 width: 200rpx; 10 height: 200rpx; 11 background-color: red; 12 } 13 .txt02{ 14 flex: none; 15 width: 200rpx; 16 height: 200rpx; 17 background-color: green; 18 } 19 .txt03{ 20 flex: none; 21 width: 200rpx; 22 height: 200rpx; 23 background-color: blue; 24 } 25 .txt04{ 26 flex: none; 27 width: 200rpx; 28 height: 200rpx; 29 background-color: yellow; 30 }
6、
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋
align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch該屬性可能取6個值（
auto | flex-start | flex-end | center | baseline | stretch;），除了auto，其他都與align-items屬性完全一致1 /* pages/index/index.wxss */ 2 .container{ 3 display: flex; 4 flex-direction: column; 5 6 } 7 .txt01{ 8 align-self: flex-start; 9 width: 200rpx; 10 height: 200rpx; 11 background-color: red; 12 } 13 .txt02{ 14 align-self: flex-end; 15 width: 200rpx; 16 height: 200rpx; 17 background-color: green; 18 } 19 .txt03{ 20 align-self: flex-start; 21 width: 200rpx; 22 height: 200rpx; 23 background-color: blue; 24 }