两端对齐页面布局实现方法

实现两端对齐是我们网页排版中经常使用到的一种布局，通过这篇文章总结一下常用的实现方法。

以三等分为例，我们实现的效果如下图：

我们的核心 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;
}
复制代码

在线预览