弹性盒子页面布局

页面：

 <view class="item">

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

    <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

     <view class="item-list">

      <image src="/img/indexSelect.png" class="img" />

      <view class="text">京东超市</view>

    </view>

  </view>

wxss:

.item{

  width: 100%;

  height: 350rpx;

  /* background-color: aqua; */

  display: flex;

  justify-content: space-around;

  align-items: center;

  flex-wrap: wrap;

}

.item-list{

  width:150rpx;

  height: 150rpx;

  /* background-color: blueviolet; */

  display: flex;

  justify-content:space-around;

  align-items: center;

  flex-direction: column;

  align-content: space-around;

}

.text{

  font-size: 30rpx;

}

标签：flex,盒子,around,space,弹性,超市,content,京东,页面
来源： https://blog.csdn.net/zb0109/article/details/122510819