微信小程序 view 利用 flex 横向平均分配宽度

最新推荐文章于 2024-10-06 15:25:53 发布

骑蜗牛de刘皇shu

最新推荐文章于 2024-10-06 15:25:53 发布

阅读量2.3w

点赞数 7

分类专栏：微信小程序

本文链接：https://blog.csdn.net/ZkD953/article/details/82422993

版权

微信小程序专栏收录该内容

12 篇文章 1 订阅

订阅专栏

.part .content .zg {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: 50%;
}

/* 平均分配宽度 */

.part .content .zg view:nth-of-type(1) {
  flex-grow: 1;
}

.part .content .zg view:nth-of-type(2) {
  flex-grow: 1;
}

.part .content .zg view:nth-of-type(3) {
  flex-grow: 1;
}

.part .content .zg .zg_txt {
  font-family: PingFangSC-Regular;
  font-size: 24rpx;
  color: #666;
}

<view class='zg'>
        <view class='zg_txt'>总整改：20</view>
        <view class='zg_txt'>待整改：2</view>
        <view class='zg_txt'>已整改：18</view>
</view>