一、兜兜轉(zhuǎn)轉(zhuǎn)一大圈
兜兜轉(zhuǎn)轉(zhuǎn)一大圈，最后發(fā)現(xiàn)實(shí)現(xiàn)兩端對(duì)齊布局方式最簡單的居然是使用CSS columns多欄布局。

例如，我們想要實(shí)現(xiàn)3列元素兩端對(duì)齊，中間間隙是30px，CSS代碼為：

.container {
    columns: 3;
    column-gap: 30px;
    /* 也可以是gap: 30px */
}
叮咚，結(jié)束了，game over~

簡單到令人發(fā)指。

不要懷疑，看一個(gè)實(shí)時(shí)渲染的例子吧：

<div class="container">
    <div class="zhang"></div>
    <div class="xin"></div>
    <div class="xu"></div>
</div>
.container {
    columns: 3;
    column-gap: 30px;
}
.container > div {
    padding: 50px;
    background: deepskyblue;
}
實(shí)時(shí)渲染效果如下，如果沒效果，請(qǐng)?jiān)L問原文地址。
二、columns實(shí)現(xiàn)的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
相比Flex布局和Grid布局的space-between值的兩端對(duì)齊效果，使用CSS columns布局實(shí)現(xiàn)的優(yōu)點(diǎn)除了代碼少了一點(diǎn)之外，最大的優(yōu)點(diǎn)是保護(hù)了HTML元素原本的display計(jì)算值。

例如，瀏覽器默認(rèn)狀態(tài)下，<li>元素會(huì)出現(xiàn)項(xiàng)目符號(hào)，例如圓點(diǎn)，或數(shù)字序號(hào)。

如果使用Flex布局或Grid布局，就需要設(shè)置display:flex或者display:grid，改變了原始的display:list-item計(jì)算值，圓點(diǎn)，或數(shù)字序號(hào)就會(huì)消失。

針對(duì)這個(gè)優(yōu)點(diǎn)，我做了個(gè)demo，您可以狠狠地點(diǎn)擊這里：list-style-type保留同時(shí)columns兩端對(duì)齊demo

可以看到<li>元素子元素既保持了兩端對(duì)齊效果，<li>元素自身默認(rèn)自帶的圓點(diǎn)符號(hào)也保留了，如下圖所示。

項(xiàng)目符號(hào)點(diǎn)依舊保留示意

這是Flex布局和Grid布局無法輕松實(shí)現(xiàn)的。

缺點(diǎn)
適合單行元素的兩端對(duì)齊效果，如果列表元素有很多行，則columns布局就不太好處理，一是列表的流向優(yōu)先垂直方向，二是容易出現(xiàn)列表垂直分列的意外場景。

三、結(jié)語
CSS columns實(shí)現(xiàn)兩端布局效果雖然在實(shí)際開發(fā)的時(shí)候不實(shí)用，因?yàn)檫€是有不少限制的。

唯一適合的場景，就是不改變display值同時(shí)實(shí)現(xiàn)兩端布局效果的時(shí)候，雖然這樣的場景比較少，但是實(shí)際開發(fā)項(xiàng)目那么多，使用場景千千萬，難保什么時(shí)候會(huì)遇到，此時(shí)，用上短短columns:3;gap:30px;幾個(gè)字母就實(shí)現(xiàn)精湛的布局效果，豈不爽哉！

責(zé)任編輯：中山網(wǎng)站建設(shè)
 【網(wǎng)訊網(wǎng)絡(luò)】國家高新技術(shù)企業(yè)》十一年專注軟件開發(fā)，網(wǎng)站建設(shè)，網(wǎng)頁設(shè)計(jì)，APP開發(fā)，小程序，微信公眾號(hào)開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進(jìn)銷存管理軟件等)！服務(wù)熱線：0760-88610046、13924923903，http://m.denorpool.com