微信小程序 flex 左右布局

最新推荐文章于 2024-09-19 16:44:07 发布

WP猫

最新推荐文章于 2024-09-19 16:44:07 发布

阅读量1.6k

点赞数

分类专栏：小程序文章标签： WeUI 布局卡片式设计微博风格前端开发

本文链接：https://blog.csdn.net/qq_15369533/article/details/124497141

版权

小程序专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<view class="weui-flex">
  <view class="weui-flex__item">
    <view class="card">
      <image class="item-icon" src="/static/img/wb.png" mode="widthFix"></image>
      <view class="title">微博</view>
    </view>
  </view>
  <view class="weui-flex__item">
    <view class="card">weui</view>
  </view>
  <view class="weui-flex__item">
    <view class="card">weui</view>
  </view>
  <view class="weui-flex__item">
    <view class="card">weui</view>
  </view>
  <view class="weui-flex__item">
    <view class="card">weui</view>
  </view>
</view>

.weui-flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px
}

.weui-flex__item {
  flex: 0 0 auto;
  width: 50%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.card {
  background-color: rgb(255, 67, 81);
  border-radius: 5px;
  padding: 15px;
  color: #fff;
  font-size: 14px;
  height: 111px;
  margin-bottom: 20rpx;
}

.card  .item-icon{
  position: relative;
  z-index: 1;
  width: 80rpx;
  height: 80rpx;
}