xxx之九宫格布局

<!-- wxml -->
<view class="categories">
  <view class="categorie" wx:for="{{categories}}">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

 

//js------------
Page({
  /**
   * 页面的初始数据
   */
  data: {
   categories:[
      { image: "../../images/ionc1.png", name: "土豆1" },
      { image: "../../images/ionc1.png", name: "土豆2" },
      { image: "../../images/ionc1.png", name: "土豆3" },
      { image: "../../images/ionc1.png", name: "土豆4" },
      { image: "../../images/ionc1.png", name: "土豆5" },
      { image: "../../images/ionc1.png", name: "土豆6" },
      { image: "../../images/ionc1.png", name: "土豆7" },
      { image: "../../images/ionc1.png", name: "土豆8" },
      { image: "../../images/ionc1.png", name: "土豆9" }
    ]
  }
})

.categories{
  /* display flex是将对象作为弹性伸缩盒显示。。。
  就是可以使用flex布局了，没弄过布局看见这一脸楞逼，这啥。。 */
  display: flex;
  /* 从左往右，从上下 排列 */
  flex-wrap:wrap;
  /* 水平方向居中，这里木用 */
  justify-content: center;
  /* 这里是下面没画到的边框 */
  border-left: 1rpx solid #fff;
  border-top: 1rpx solid #fff;
}
.categories .categorie{
  display: flex;
  /* 将盒子中的垂直方向排列 */
  flex-direction:column; 
  /* 水平居中*/
  justify-content: center;
   /* 垂直居中*/
  align-items:center;
  width:33.3333%;
  height:250rpx;
  /* 画相邻的两条边框，这样就只剩最外面的另外两条边，在上面画 */
  border-right: 1rpx solid #fff;
  border-bottom: 1rpx solid #fff;
  /* 这个没见过。。可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中 */
  box-sizing: border-box;
}
.categories .categorie image{
  width:80rpx;
  height:80rpx;
}
.categories .categorie text{
  font-size: 28rpx;
  margin-top: 10rpx;
}

感想。。。。布局真头痛，flex真好用。。css是啥。

转载于:https://www.cnblogs.com/nili/p/10519496.html