Research using Apple's official website Justify layout navigation

When implementing justifies the text, where the text element can be achieved using the following property requirements

text-align: justify;

We already know that the use of a floating layout is inferior choice, because the floating layout will cause the page to render twice the global decrease rendering efficiency, and therefore has been found in many alternative floating layout. Justify example, both old and new models flexible pouch, and inline block elements Next we need to analyze.

Apple official website is used at both ends of the block element is aligned inline.

<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;
}

Want to use justify achieve the desired results, it must be noted that the following

Inline elements will not be the last row at both ends of the center, and will be left-aligned.

Thus, if only one row of navigation elements, it text-align: justifydoes not take effect, so we wrap the child element after the last add a pseudo-class, and set his width to 100%, then this is the last row after a pseudo-class, the effect will be proud to achieve normal.

Guess you like