真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

CSS中columns怎么實(shí)現(xiàn)兩端對(duì)齊布局

小編給大家分享一下CSS中columns怎么實(shí)現(xiàn)兩端對(duì)齊布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供興安盟烏蘭浩特企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站制作、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為興安盟烏蘭浩特眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

一、兜兜轉(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 30px;
}

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

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

.container { columns: 3 30px; } .container > div { padding: 50px; background: deepskyblue; }

實(shí)時(shí)渲染效果如下

二、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)下，

元素會(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

可以看到

元素子元素既保持了兩端對(duì)齊效果，

元素自身默認(rèn)自帶的圓點(diǎn)符號(hào)也保留了，如下圖所示。

CSS中columns怎么實(shí)現(xiàn)兩端對(duì)齊布局

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

缺點(diǎn)

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

三、結(jié)語(yǔ)

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

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

其實(shí)技術(shù)就是這樣，幾乎很少有沒(méi)有作用，完全雞肋的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)了這樣的需求，那種感覺(jué)，會(huì)讓你上癮的，什么感覺(jué)呢？就是技術(shù)世界的掌控者，俯瞰蕓蕓代碼，代碼世界一人之下萬(wàn)人之上的感覺(jué)，本質(zhì)上是一種掌控權(quán)力的感覺(jué)，是成為技術(shù)高手的感覺(jué)。

所以，CSS columns實(shí)現(xiàn)兩端布局，雖出場(chǎng)機(jī)會(huì)不錯(cuò)，但本身價(jià)值并不低。

以上是“CSS中columns怎么實(shí)現(xiàn)兩端對(duì)齊布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：CSS中columns怎么實(shí)現(xiàn)兩端對(duì)齊布局
分享URL：http://weahome.cn/article/jhisse.html