微信小程序的flex布局

flex 布局 js 部分

// pages/usbox/usbox.js

Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }

})

flex 布局结构

<!--pages/usbox/usbox.wxml-->
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

flex 布局样式

/* pages/usbox/usbox.wxss */
.flex-wrp{
    display: flex;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.bc_green{
    background: green;
}
.bc_red{
    background: red;
}
.bc_blue{
    background: blue;
}