小程序的布局只要有兩種，一種是用flex來做布局，還有就是用相對定位和絕對定位。相對定位和絕對定位這個(gè)見得比較多，比起flex麻煩很多，堅(jiān)決舍棄了，總結(jié)一下flex布局的資料，留備查用。如有不足，希望各位道友助攻。

不管是APP開發(fā)還是前端開發(fā)，最惡心最頭痛的就是對各種屏幕的適配了。。。一不留神看著就難看了，在web網(wǎng)頁中必須要考慮兼容性，因?yàn)闉g覽器不同導(dǎo)致不同瀏覽器兼容起來很麻煩。不過，小程序的話，并不需要考慮其他瀏覽器，我記得前段時(shí)間微信專門發(fā)了個(gè)公告，說是換成了WKWebView，都換成了webkit。flex布局的話，能夠很好地適應(yīng)各個(gè)尺寸的屏幕，這點(diǎn)不錯(cuò)。任何一個(gè)容器或者是行內(nèi)元素都可以指定為Flex布局，小程序也一樣。

  .box{
  display: flex;
}

注意：
設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

首先最好看看阮一峰的關(guān)于flex的博客一,二，講的非常好，看一遍基本上就理解了，理解了就好，記不住的用到慢慢再查

首先明確下基本概念（借用博客上一張圖）

flex

• 容器默認(rèn)存在兩根軸：
  • 水平的主軸（main axis）和垂直的交叉軸（cross axis）。
• 主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；
• 交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
• 元素默認(rèn)沿主軸排列（當(dāng)然可以通過代碼修改）。
• 單個(gè)元素占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size
• flex container里面的元素同樣可以設(shè)置flex布局。

flex常用屬性，方便查閱

這六個(gè)屬性設(shè)置在容器上

• flex-direction 決定主軸的方向（即元素的排列方向）。

  • 有四個(gè)值:
    • row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
    • row-reverse：主軸為水平方向，起點(diǎn)在右端。
    • column：主軸為垂直方向，起點(diǎn)在上沿。
    • column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

• flex-wrap 如果一條軸線排不下，如何換行。(iOS上很少用這樣的方式，一般都是平均分布)

  • 三個(gè)值:
    • nowrap（默認(rèn)）：不換行。
    • wrap：換行，第一行在上方。
    • wrap-reverse：換行，第一行在下方。

• flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。用的時(shí)候一般就直接用這個(gè)，除非少數(shù)麻煩的布局需要改變布局方向和起始位置之類的

• justify-content屬性定義了項(xiàng)目在主軸上的對齊方式。

  • 五個(gè)值:
    • flex-start（默認(rèn)值）：左對齊
    • flex-end：右對齊
    • center： 居中
    • space-between：兩端對齊，項(xiàng)目之間的間隔都相等。
    • space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

• align-items屬性定義項(xiàng)目在交叉軸上如何對齊。

  • 五個(gè)值
    • flex-start：交叉軸的起點(diǎn)對齊。
    • flex-end：交叉軸的終點(diǎn)對齊。
    • center：交叉軸的中點(diǎn)對齊。
    • baseline: 項(xiàng)目的第一行文字的基線對齊。
    • stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

• align-content屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

  • 屬性可以取六個(gè)值:
    • flex-start：與交叉軸的起點(diǎn)對齊。
    • flex-end：與交叉軸的終點(diǎn)對齊。
    • center：與交叉軸的中點(diǎn)對齊。
    • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
    • space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
    • stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

這幾個(gè)屬性設(shè)置在元素上（只能用在元素里面，無法用在容器）

• flex-grow屬性定義元素的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
  如果所有元素的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)元素的flex-grow屬性為2，其他元素都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
• flex-shrink屬性定義了元素的縮小比例，默認(rèn)為1，即當(dāng)空間不足，該元素將按比例縮小。
• flex-basis屬性定義了在分配多余空間之前，元素占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即元素的本來大小。
• flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
• order屬性定義元素的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
• align-self 定義元素自身的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch

flex 就這幾個(gè)屬性，具體 的用法需要在實(shí)踐中篩選。先暫時(shí)記錄這么多，以后用到了再補(bǔ)充。