Apple官网研究之使用Justify布局导航

在实现文字两端对齐的时候，能够对文字所在的元素使用以下属性来达到需求

text-align: justify;

咱们已经知道，使用浮动布局是一个次等选择，由于浮动布局会致使页面全局渲染2次而下降渲染效率，所以陆续出现了许多浮动布局的替换方案。好比新旧两种弹性盒模型，以及接下来咱们须要分析到的内联块元素的两端对齐。

Apple官网也是使用了内联块元素的两端对齐。

<div class="wrap">
    <div class="item">Javascript</div>
    <div class="item">Css</div>
    <div class="item">Angular</div>
    <div class="item">Gulp</div>
    <div class="item">Bootstrap</div>
</div>

.wrap {
    max-width: 600px;
    background-color: orange;
    color: #fff;
    margin: 20px auto;
    text-align: justify;
    height: 44px;
    line-height: 44px;
}

.item {
    display: inline-block;
}

.wrap::after {
    display: inline-block;
    content: '';
    width: 100%;
    line-height: 0;
    font-size: 0;
}

想要使用justify达到预期效果，必须注意到如下一点

内联元素最后一排不会两端居中，而会左对齐。

所以，若是导航元素只有一排的话，text-align: justify并不会生效， 因此咱们在wrap子元素的最后添加一个after伪类，并将他的宽度设置为100%，那么最后一排就是这个after伪类了，效果就得意正常实现。