flex布局知识点Beta

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

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;
}

相关文献：Flex 布局语法教程