上下字体自动分散 对齐方法

昨天被指派写样式，我的天好久不写就算了 弹性盒子属性多的有点记不住，搞了一个小时没有达成ui图的样式，百度搜也没有答案，于是请教了一下大佬，虽然很简单但是还是想记录下来以防以后遇到同样的问题脑子不好使 哈哈哈哈哈哈~上图

ui设计图是这样的

然后我的最初效果是这样的

期间想过用最笨的方法去撑开达到想要的效果，但是真是空格打到爆都于事无补哈哈哈😂蠢哭了要，后来大佬上来一顿操作 就俩属性 分享给你们，虽然可能对于咋看这篇博客的你来说很简单！但是我相信世界这么大肯定有跟我一样的哈哈哈哈😂😂😂😂

      这是整体布局的格式，具体可以参考上面的ui图看
      <!-- 个人信息 -->
      <ui class="user_list">
        <li>
          <p class="user_font">账号</p>
          <p class="user_border">123</p>
        </li>
        <li>
          <p class="user_font">人员ID</p>
          <p class="user_border">123</p>
        </li>
        <li>
          <p class="user_font">人员权限</p>
          <p class="user_border">123</p>
        </li>
        <li>
          <p class="user_font">所属机构</p>
          <p class="user_border">123</p>
        </li>
        <li>
          <p class="user_font">电话</p>
          <p class="user_border">12222</p>
        </li>
        <li>
          <p class="user_font">邮箱</p>
          <p class="user_border">2222</p>
        </li>
      </ui>

接着发样式设置

外层盒子
.user_list {
  width: 100%;
}
父盒子
li {
  width: 97%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  color: #3B3F3D;
}
子盒子
.user_font {
  width: 68px;
  font-size: 16px;
   color: #000000;
   text-align: justify;
   text-align-last: justify;
}
.user_border {
  width: 58%;
  margin-left: 20px;
  line-height: 32px;
  text-align: center;
  color: #000000;
  border-bottom: 1px dashed #0f1210;
}

没错就是它俩 单独摘要出来

 text-align-last:justify; 
 text-align:justify;

给元素设置个固定宽度加上这两个属性就可以了   
字体自动分散

展示一下🤭

今天又是罗里吧嗦的一天哈哈哈🤣🤣🤣🤣再见