微信小程序，每行显示四列，每行显示三列，每行显示两列

2024年1月3日 141次阅读 来源: 原克技术

1.html

<view class="con_list">
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">品牌大全</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">新品上架</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">用户中心</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">订单列表</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">留言反馈</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">活动列表</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">帮助中心</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">关于我们</view>
  </view>
</view>

2.css

.con_list{ 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.con_list .list{ 
  width: 25%;  /*width:50%;每行显示两列，width:33.3%;每行显示三列*/
  height: auto;
  text-align: center;
  margin-top: 40rpx;
}
    原文作者：原克技术
    原文地址: https://blog.csdn.net/weixin_44432032/article/details/113093787
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞