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僞類了，效果就得意正常實現。