微信小程序（3）flex布局

小程序页面可以使用类似于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>

  • 显示效果