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

本文介绍如何在小程序中利用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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值