flex布局知识点Beta

最新推荐文章于 2023-11-12 11:14:40 发布

flitrue

最新推荐文章于 2023-11-12 11:14:40 发布

阅读量504

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： flex weapp

本文链接：https://blog.youkuaiyun.com/flitrue/article/details/78071460

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

1 篇文章

订阅专栏

先看图，实现下方列表中的效果，名字在左，数量在右，相对条目居中。

flex布局

html代码

<view class="list">
      <view>
        <text class="sub">苏享茂</text>
      </view>
      <view class="num">117条</view>
    </view>

css代码

.list{
  font-size: 16px;
  height: 36px;
  padding: 8px;
  background-color: white;
  margin-top: 1px;
  line-height: 36px;
  display: flex; //布局方式
  justify-content: space-between;// 项目在主轴上的对齐方式
}
.sub{
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.num{
    flex-shrink: 0;
    font-size: 12px;
    color: #999999;
}