小程式頁面可以使用類似於html的方式進行設計，鑑於小程式主要適用於移動端，所以推薦使用flex的響應式佈局。

•  定義佈局 display：flex

•  flex容器的屬性

  • flex-direction:排列方向
    • row：預設橫向排列
    • row-reverse ：橫向排列倒序
    • colunm：縱向排列
    • column-reverse：縱向排列倒序
  • flex-wrap:換行規則
    • nowrap:不換行（當元素寬度超過容器寬度，將元素寬度進行平均壓縮地不換行處理方式）
    • wrap:預設換行
    • wrap-reverse:從下往上換行
  • justify-content:對齊方式
    • flex-start 預設向左對齊
    • flex-end 向右對齊
    • center 向中間對齊
    • space-around 所有元素周圍都被空白包圍
    • space-between 除了最邊緣的元素以外 其他元素都被空白包圍
  • order:手動排序
  • flex:元素所佔寬度的比值

• 例子

  • wxss程式碼

    /* pages/index/index.wxss */
    
    .container{
      display: flex;
      /* flex-direction:column; 橫縱排序設定*/
      /* flex-wrap: wrap-reverse; 換行規則*/
      /* justify-content: center; 對齊方式*/
    }
    
    .size{
      width: 150rpx;
      height: 150rpx;
    }
    
    .a{
      background-color: red;
      order: 1;
      flex: 2;
    }
    
    .b{
      background-color:yellow;
       order: 2;
       flex: 1;
    }
    
    .c{
      background-color:rgb(174, 174, 182);
      order: 3;
      flex: 1;
    }
    
    .d{
      background-color:orange;
      order: 5;
      flex: 1;
    }
    
    .e{
      background-color: green;
      order: 4;
      flex: 1;
    }
     
    

  • wxml程式碼

    <!--index.wxml-->
    <view class="container">
      <view class='a size'>a </view> 
      <view class='b size'>b </view> 
      <view class='c size'>c </view> 
      <view class='d size'>d </view> 
      <view class='e size'>e </view> 
    </view>
     
    

  • 顯示效果