CSS样式代码

早上起不来的某人

于 2022-10-12 18:39:58 发布

阅读量134

点赞数

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_55855427/article/details/127288297

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、上图片下文字的集合（wechat)

html

 <view class="cate-lv3-list">
      <view class="cate-lv3-item" v-for="(item3,i3) in item2.children" :key="i3">
            <image :src="item3.cat_icon"></image>
            <text>{{item3.cat_name}}</text>
      </view>
  </view>

css样式

.cate-lv3-list {
    // 1 设置弹性布局
    display: flex;

    // 3、实现自动换行
    flex-wrap: wrap;

    .cate-lv3-item {

      // 4、设置一行有三个item项
      width: 33.33%;
      // 5、设置图片文字上下格式
      display: flex;
      flex-direction: column;
      // 6、设置图片文字横向、纵向居中
      justify-content: center;
      align-items: center;
      // 7、添加下边距
      margin-bottom: 10px;

      // 2、设置图片大小 但是没有自动换行
      image {
        width: 60px;
        height: 60px;
      }

      text {
        font-size: 12px;
      }
    }
  }

渲染结果：