效果图

属性

参考：view

代码

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/flex/flex",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. flex.wxml

<view class="page">
    <view class="page__hd">
        <view class="page__title">Flex</view>
        <view class="page__desc">Flex布局</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="weui-flex">
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
        </view>
        <view class="weui-flex">
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
        </view>
        <view class="weui-flex">
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
        </view>
        <view class="weui-flex">
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
        </view>
        <view class="weui-flex">
            <view><view class="placeholder">weui</view></view>
            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
            <view><view class="placeholder">weui</view></view>
        </view>
    </view>
</view>

4. flex.wxss

.placeholder{
    margin: 5px;
    padding: 0 10px;
    text-align: center;
    background-color: #00ff00;
    height: 2.3em;
    line-height: 2.3em;
    color: #fff;
}