兩端對齊頁面佈局實現方法

實現兩端對齊是咱們網頁排版中常用到的一種佈局，經過這篇文章總結一下經常使用的實現方法。

以三等分爲例，咱們實現的效果以下圖：

咱們的核心 HTML 結構以下：

<div class="items">
    <div class="item"></div> 
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
複製代碼

方法一：margin 負值

咱們設子元素之間的間隔爲 $padding，經過給外層容器設置 margin-left: -$padding 和 width: calc(100% + #{$padding * 2}) 來實現，核心代碼（SCSS）以下：

$padding: 10px;

.items{
    width: calc(100% + #{$padding * 2});
    margin-left: -$padding;
}

.item{
    width: calc((100% - #{$padding * 2}) / 3); // 3 等分
    margin-left: $padding;
    float: left;
}

複製代碼

完整代碼-在線預覽

方法二：多列布局

利用多列布局，即 CSS3 增長的 column 屬性，核心代碼以下：

.items{
    width: 100%;;
    column-gap: 10px;
    column-count: 3;
    overflow: hidden;
}
複製代碼

完整代碼-在線預覽

方法三：flex 佈局

利用 flex 佈局，給容器設置 justify-content: space-between; 便可，核心代碼以下：

.items{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
複製代碼

完整代碼-在線預覽

方法四：視爲內聯元素

將子元素看作行內元素，即給子元素設置 display: inline-block，再給父元素設置 text-align: justify，這樣子元素就自動等間距兩端對齊了，無需計算子元素間的 margin 間距。 可是，此方法會遇到一個很噁心的問題，就是：inline-block 元素間的換行符空格間隙問題，來看看怎麼解決這個問題，核心代碼以下：

.items{
    width: 100%;
    text-align: justify;
    overflow: hidden;
    margin-top: 10px;
}
.items:after{
    /* text-align-last:justify只有IE支持，標準瀏覽器須要使用 .demo:after 僞類模擬相似效果 */
    display:inline-block;
    overflow:hidden;
    width:100%;
    height:0;
    content:'';
    vertical-align:top;/* opera瀏覽器解決底部多餘的空白 */
}
.item{
    width: 30%;
    display: inline-block;
}
複製代碼

在線預覽