需求

CSS 两行代码轻松实现 多行文字字数不一致的两端对齐问题

<style lang="stylus" scoped>
...
.p-con-body
  display flex
  flex-direction row
  font-size .4rem
  ul
    flex 1
    display flex
    flex-direction column
    justify-content space-between
    li
      flex 1
      line-height 1rem
      text-align center
      border 1px solid #eeeeee
    &:first-child
      background-color #cfbb80
      color #ffffff
      font-weight 600
      li
        color #ffffff
        border-bottom 1px solid #ffffff
        text-align-last justify
        padding 0 3.4rem
...
</style>

关键是这两句

text-align-last justify
padding 0 3.4rem

使用text的text-align-last 为justify 属性，便可实现把每行li内的文字两端对齐，再设置下li的padding内边距即可。
样式效果：

补充知识点

CSS3---first-child或者nth-child(1) 不起作用的原因

e.g.原HTML的结构大致是
<div>
    <svg>
    <p>
    <p>
</div>

在对P标签使用CSS的first-child和nth-child(1)属性定义时，发现总是不起作用，百度了下才发现，原来自己以前的理解有误: first-child和nth-child(1)并不是从定义的标签内部开始计算位置，如P。
而是从所定义标签的父元素开始计算，如上面👆的div。
所以要定义第一个P标签的属性，就应是nth-child(2)