小程序实现Grid布局

参考

小程序FlexDemo:  https://github.com/icindy/wxflex

阮一峰博客:flex详解  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
 

//index.js
const TAG = "index"
//获取应用实例
const app = getApp()

Page({
    data: {
        datas: ["https://gitee.com/index/ent_poster/banner_5_1_a.png",
            "https://gitee.com/index/ent_poster/banner_5_1_a.png",
            "https://gitee.com/index/ent_poster/banner_5_1_a.png",
            "https://gitee.com/index/ent_poster/banner_5_1_a.png"]
    },
    onLoad: function () {
        console.log(TAG, "onLoad")
    },
})

<!--index.wxml-->
<view class="parent">
    <block class="parent" wx:for="{{datas}}"> <!--block 是循环打印image-->
        <image class="child" src="{{item}}"></image>
    </block>
</view>

.parent {
  width: 100%;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  padding-left: 2%;
  padding-right: 2%;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 44%;
  height: 100px;
  border: 1px solid red;
  margin-top: 4%;
  margin-left: 2%;
  margin-right: 2%;
}

最后效果