一拄衰、兜兜轉(zhuǎn)轉(zhuǎn)一大圈
兜兜轉(zhuǎn)轉(zhuǎn)一大圈，最后發(fā)現(xiàn)實(shí)現(xiàn)兩端對(duì)齊布局方式最簡(jiǎn)單的居然是使用CSS columns多欄布局茫打。
例如，我們想要實(shí)現(xiàn)3列元素兩端對(duì)齊包吝，中間間隙是30px源葫，CSS代碼為：
.container {
columns: 3;
column-gap: 30px;
/* 也可以是gap: 30px */
}
叮咚，結(jié)束了息堂，game over~
簡(jiǎn)單到令人發(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)也保留了灶平，如下圖所示箍土。
這是Flex布局和Grid布局無法輕松實(shí)現(xiàn)的。
缺點(diǎn)
適合單行元素的兩端對(duì)齊效果吴藻，如果列表元素有很多行，則columns布局就不太好處理疮鲫，一是列表的流向優(yōu)先垂直方向，二是容易出現(xiàn)列表垂直分列的意外場(chǎng)景。
三妇多、結(jié)語
CSS columns實(shí)現(xiàn)兩端布局效果雖然在實(shí)際開發(fā)的時(shí)候不實(shí)用，因?yàn)檫€是有不少限制的立莉。
唯一適合的場(chǎng)景，就是不改變display值同時(shí)實(shí)現(xiàn)兩端布局效果的時(shí)候蜓耻，雖然這樣的場(chǎng)景比較少，但是實(shí)際開發(fā)項(xiàng)目那么多饶氏，使用場(chǎng)景千千萬，難保什么時(shí)候會(huì)遇到疹启，此時(shí)蔼卡，用上短短columns:3;gap:30px;幾個(gè)字母就實(shí)現(xiàn)精湛的布局效果，豈不爽哉雇逞！
其實(shí)技術(shù)就是這樣，幾乎很少有沒有作用塘砸，完全雞肋的API的，存在就有道理粟耻，出現(xiàn)即有價(jià)值眉踱，只是其使用的場(chǎng)景是應(yīng)對(duì)非典型場(chǎng)景的。
學(xué)習(xí)之眨猎，了解之，獲取短時(shí)間看不到效果婿禽，但是隨著項(xiàng)目經(jīng)驗(yàn)不斷積累，一定會(huì)遇到使用適合的使用場(chǎng)景的淀零，別人還會(huì)頭疼怎么實(shí)現(xiàn)膛壹，還在不斷的谷歌搜索唉堪，而你，一個(gè)閃念的時(shí)間唠亚，聊聊數(shù)行代碼持痰，就實(shí)現(xiàn)了這樣的需求，那種感覺工窍，會(huì)讓你上癮的，什么感覺呢究珊？就是技術(shù)世界的掌控者，俯瞰蕓蕓代碼剿涮，代碼世界一人之下萬人之上的感覺攻人，本質(zhì)上是一種掌控權(quán)力的感覺，是成為技術(shù)高手的感覺怀吻。
所以，CSS columns實(shí)現(xiàn)兩端布局蓬坡，雖出場(chǎng)機(jī)會(huì)不錯(cuò)，但本身價(jià)值并不低萨赁。
好兆龙，本文技術(shù)難度到?jīng)]什么，主要是一個(gè)布局小tips共享紫皇。
如果你覺得這個(gè)布局實(shí)現(xiàn)還不錯(cuò)，歡迎分享給其他小伙伴化焕。
