欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2020-05-28 15:18:46   作者:張鑫旭   我要評論
這篇文章主要介紹了CSS columns實現(xiàn)兩端對齊布局效果,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

 

一、兜兜轉轉一大圈

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

例如,我們想要實現(xiàn)3列元素兩端對齊,中間間隙是30px,CSS代碼為:

.container {
    columns: 3 30px;
}

叮咚,結束了,game over~

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

不要懷疑,看一個實時渲染的例子吧:

<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;
}

實時渲染效果如下

二、columns實現(xiàn)的優(yōu)缺點

優(yōu)點

相比Flex布局和Grid布局的space-between值的兩端對齊效果,使用CSS columns布局實現(xiàn)的優(yōu)點除了代碼少了一點之外,最大的優(yōu)點是保護了HTML元素原本的 display 計算值。

例如,瀏覽器默認狀態(tài)下, <li> 元素會出現(xiàn)項目符號,例如圓點,或數(shù)字序號。

如果使用Flex布局或Grid布局,就需要設置 display:flex 或者 display:grid ,改變了原始的 display:list-item 計算值,圓點,或數(shù)字序號就會消失。

針對這個優(yōu)點,我做了個demo,您可以狠狠地點擊這里: list-style-type保留同時columns兩端對齊demo

可以看到 <li> 元素子元素既保持了兩端對齊效果, <li> 元素自身默認自帶的圓點符號也保留了,如下圖所示。

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

缺點

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

三、結語

CSS columns實現(xiàn)兩端布局效果雖然在實際開發(fā)的時候不實用,因為還是有不少限制的。

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

其實技術就是這樣,幾乎很少有沒有作用,完全雞肋的API的,存在就有道理,出現(xiàn)即有價值,只是其使用的場景是應對非典型場景的。

學習之,了解之,獲取短時間看不到效果,但是隨著項目經驗不斷積累,一定會遇到使用適合的使用場景的,別人還會頭疼怎么實現(xiàn),還在不斷的谷歌搜索,而你,一個閃念的時間,聊聊數(shù)行代碼,就實現(xiàn)了這樣的需求,那種感覺,會讓你上癮的,什么感覺呢?就是技術世界的掌控者,俯瞰蕓蕓代碼,代碼世界一人之下萬人之上的感覺,本質上是一種掌控權力的感覺,是成為技術高手的感覺。

所以,CSS columns實現(xiàn)兩端布局,雖出場機會不錯,但本身價值并不低。

好,本文技術難度到沒什么,主要是一個布局小tips共享。

本文地址: https://www.zhangxinxu.com/wordpress/?p=9429

到此這篇關于CSS columns實現(xiàn)兩端對齊布局效果的文章就介紹到這了,更多相關css columns兩端對齊布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

最新評論