微信小程序中通过flex实现网格布局(二)

效果图：

<view class="flex_container">
  <view class="flex_item" wx:for='abcdef'>{{item}}view>
view>

.flex_container{
  display: flex;
  /** 一行放不下时候换行，默认不换行，然后控件会进行缩放进一行内,因为
  flex-shrink默认为0，否则会溢出边框 */
  flex-flow: wrap;/** 一行放不下时进行换行 */
  justify-content: center;/** 设置子项目的水平排列方式 */
}
.flex_item{
  width: 100px;
  height: 100px;
  margin: 5rpx;/** 外边距合并，所以垂直间距=水平间距 */
  display: flex;
  background-color: orchid;
  justify-content: center;
  align-items: center;
}