两端对齐不生效：文字长度小于容器宽度的时候

首先看两端对齐，当不使用两端对齐，直接写文字，效果是这样的。

<div>我想两端对齐，啊我想两端是对,齐我想两端对aaaaaaaaa齐我想两端对/?齐我想两端对齐我想两端对齐我想两端对齐</div>

对应的样式

div {
      width: 200px;
      height: 200px;
      background-color: red;
}

效果 1：文字多，没有两端对齐

接下来，我们加上 text-align: justify;样式，

div {
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: justify;         
}

效果 2：文字多，实现了两端对齐

可以发现，两端对齐的效果已经实现了。

接下来，我们把文字改的少一点。怪异的事情发生了。

效果3：文字变少，两端对齐失效了！！！

两端对齐失效了！别紧张，接下来就说解决办法。

div {
    width: 200px;
    height: 200px;
    display: inline-block; //要设置display为inline-block
    background-color: red;
    text-align: justify;   
}
div:after {  //这个after伪类一定要加
    content: '';
    width: 200px;
    display: inline-block;
    text-align: justify;
}

再来看一下效果

效果 4：文字变少，两端对齐依旧生效

总结：通过设置after伪类，可以实现两端对齐，不管文字多或少，都适用。