display:flex布局中文字居右等应用

在display:flex中，
1.flex: 1;text-align: right;代表“项目”居右，
原因是这样会让它占用主轴上剩余的空间，配合text-align: right可以实现文字靠在最右侧的效果
2.margin-right:auto 代表 右边最大化，此时会移动到div的左侧。

<template>
  <section>
    <div class="join-child">
      <div class="div1">
        <img src="https://profile.csdnimg.cn/E/A/2/3_qq_39933800">
      </div>
      <div class="join-child-div1">
        <div class="join-child-div1-1">
          <span>养猫俱乐部 </span>
          <span style="color: #a7a7a7;flex: 1;text-align: right;padding-top: 0.05rem">成员&nbsp;1238</span>
        </div>
        <div>
          <span style="color: #a7a7a7;">这是介绍介绍介绍介绍介绍介绍</span>
        </div>
      </div>
      <div>
        <div class="card-tag-btn" style="float: right;"><nut-icon type="right" size="10px" color="#999"></nut-icon></div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
    }
  },
  created() {

  },
  methods: {

  },
  filters: {

  }
}
</script>

<style lang="less" scoped>
    #first{
        margin:0.2rem;
    }
    section{
      position: absolute;
      height: 100%;
      width: 100%;
      background: lightcyan;
      top:0;
      left: 0;
    }
    .join-child{
      width: 100%;
      height: 0.7rem;
      border-radius: 0.03rem;
      padding: 0.05rem;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      div1{
        width: 20%;
      }
      .join-child-div1{
        width: 72%;
        margin-right: auto;
      }
      .join-child-div1-1{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
      .card-tag-btn{
        height: 0.5rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 0.15rem;
      }
      span {
        font-size: 0.1rem;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #a7a7a7;
      }
      span:first-child {
        font-size: 0.12rem;
        font-family: Helvetica;
        text-align: left;
        color: #1d2028;
        line-height: 0.2rem;
      }
      img {
        width: 0.29rem;
        height: 0.29rem;
        margin-left: 0.1rem;
        margin-right: 0.1rem;
      }

    }

</style>