小程序——用CSS实现九宫格布局

最新推荐文章于 2025-06-26 09:15:03 发布

原创

最新推荐文章于 2025-06-26 09:15:03 发布 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #九宫格 #flex布局

本文介绍如何在小程序中利用CSS的flex布局创建一个标准的九宫格。通过详细解读代码，理解布局原理，帮助开发者掌握这种常见的前端布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使用CSS实现如下的九宫格布局：

代码如下：

    <view class="form-first-bottom">
      <view class="add-container" wx:for="{
  
  {upimgarr}}" wx:key="unique">
        <image class="selectclass1" src='{
  
  {item}}' mode='aspectFill'></image>
      </view>
      <view class="add-container" bindtap="upImgClick">
        <image class="selectclass" src='../../../images/icon/select.png' mode='aspectFit'></image>
      </view>
    </view>

css代码如下：

.form-first-bottom{
  margin-left:30rpx;
  margin-right:20rpx;
  margin-top:40rpx;
  padding-bottom:40rpx;
  width:clac(100% - 50rpx);
  display:flex;
  flex-wrap:wrap;
}
.add-container{
  width:calc(34% - 18rpx);
  height:200rpx;
  t