CSS columns實(shí)現(xiàn)兩端對(duì)齊布局的示例代碼

一、兜兜轉(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 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 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)下, <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 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共享。
本文地址: https://www.zhangxinxu.com/wordpress/?p=9429
到此這篇關(guān)于CSS columns實(shí)現(xiàn)兩端對(duì)齊布局效果的文章就介紹到這了,更多相關(guān)css columns兩端對(duì)齊布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
使用CSS實(shí)現(xiàn)三欄自適應(yīng)布局(兩邊寬度固定,中間自適應(yīng))
這篇文章主要介紹了使用CSS實(shí)現(xiàn)三欄自適應(yīng)布局(兩邊寬度固定,中間自適應(yīng)),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下2020-06-02CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需2020-06-02用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn)
這篇文章主要介紹了用CSS Grid布局制作一個(gè)響應(yīng)式柱狀圖的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編2020-05-26- 這篇文章主要介紹了CCS中的margin:top塌陷問題,本文通過實(shí)例截圖給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-27
css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局
這篇文章主要介紹了css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一2020-03-09- 這篇文章主要介紹了CSS 外邊距(margin)重疊及防止方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-14
- 這篇文章主要介紹了解決margin 外邊距合并問題 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-03
css 布局 之 兩端布局的實(shí)例代碼 (利用父級(jí)負(fù)的margin)
這篇文章主要介紹了css 布局 之 兩端布局 (利用父級(jí)負(fù)的margin)的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋2020-06-08