调整使全行排满
text-align:justify
由上图效果可知，除了最后一行，每行文字铺满两端，空隙平分。
写这篇文章，是因为这可以实现某些特殊效果。flex弹性盒模型里有个属性justify-content: space-between;,如果学过flex布局，应该就能想到，使用text-align: justify就能实现其类似效果。没学过也不要紧，看下面讲解。
text-align:justify
上图，父盒子设置宽度300px，子盒子为行内块，宽80px。三个占不满，四个搁不下，当我们在父元素身上加上
text-align: justify，你就会发现，行内块布局呈现上面文字分散的效果。
但还有点瑕疵，就是最后一行不分散对齐。这个问题可以用伪元素解决，让::after独占最后一行就是喽。
fatherDiv::after{
content: '';
display: inline-block;
width: 100%;
}
注意::after伪元素也要设置成行内块，否则无效。
子盒子加点下边距，最终效果：
space-between效果
再回头去看看文字使用text-align: justify实现的效果，你就会对上面布局有更深的理解。
踩坑：
<div><span>a</span><span>b</span></div>
如上display:inline-block的a盒与b盒如果不加空并排写，就会造成使用text-align: justify不分散。原因很简单，文字中是把ab当成一个整体单词了，而行内块也是同理，把ab盒当成一个整体了，在两个元素中间加个空格问题就解决了。
