广州证券

CSS columns实现两端对齐布局的示例代码

  发布时间:2020-05-28 15:18:46   作者:张鑫旭   我要评论
这篇文章主要介绍了CSS columns实现两端对齐布局效果,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

 

一、兜兜转转一大圈

兜兜转转一大圈,最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。

例如,我们想要实现3列元素两端对齐,中间间隙是30px,CSS代码为:

.container {
    columns: 3 30px;
}

广州证券叮咚,结束了,game over~

简单到令人发指。

广州证券不要怀疑,看一个实时渲染的例子吧:

<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实现的优缺点

优点

相比Flex布局和Grid布局的space-between值的两端对齐效果,使用CSS columns布局实现的优点除了代码少了一点之外,最大的优点是保护了HTML元素原本的 display 计算值。

例如,浏览器默认状态下, <li>广州证券 元素会出现项目符号,例如圆点,或数字序号。

如果使用Flex布局或Grid布局,就需要设置 display:flex 或者 display:grid ,改变了原始的 display:list-item 计算值,圆点,或数字序号就会消失。

针对这个优点,我做了个demo,您可以狠狠地点击这里: list-style-type保留同时columns两端对齐demo

可以看到 <li> 元素子元素既保持了两端对齐效果, <li>广州证券 元素自身默认自带的圆点符号也保留了,如下图所示。

广州证券这是Flex布局和Grid布局无法轻松实现的。

缺点

广州证券适合单行元素的两端对齐效果,如果列表元素有很多行,则columns布局就不太好处理,一是列表的流向优先垂直方向,二是容易出现列表垂直分列的意外场景。

三、结语

CSS columns实现两端布局效果虽然在实际开发的时候不实用,因为还是有不少限制的。

唯一适合的场景,就是不改变display值同时实现两端布局效果的时候,虽然这样的场景比较少,但是实际开发项目那么多,使用场景千千万,难保什么时候会遇到,此时,用上短短 columns:3 30px 几个字母就实现精湛的布局效果,岂不爽哉!

其实技术就是这样,几乎很少有没有作用,完全鸡肋的API的,存在就有道理,出现即有价值,只是其使用的场景是应对非典型场景的。

广州证券学习之,了解之,获取短时间看不到效果,但是随着项目经验不断积累,一定会遇到使用适合的使用场景的,别人还会头疼怎么实现,还在不断的谷歌搜索,而你,一个闪念的时间,聊聊数行代码,就实现了这样的需求,那种感觉,会让你上瘾的,什么感觉呢?就是技术世界的掌控者,俯瞰芸芸代码,代码世界一人之下万人之上的感觉,本质上是一种掌控权力的感觉,是成为技术高手的感觉。

广州证券所以,CSS columns实现两端布局,虽出场机会不错,但本身价值并不低。

广州证券好,本文技术难度到没什么,主要是一个布局小tips共享。

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

到此这篇配资公司 CSS columns实现两端对齐布局效果的文章就介绍到这了,更多相关css columns两端对齐布局内容请搜索脚本之家以前的文章或继续浏览下面的广州证券相关的文章,希望大家以后多多支持脚本之家!

广州证券相关的文章

  • 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    这篇文章主要介绍了使用CSS实现三栏自适应布局(两边宽度固定,中间自适应),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下
    2020-06-02
  • CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码

    这篇文章主要介绍了CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需
    2020-06-02
  • 用CSS Grid布局制作一个响应式柱状图的实现

    这篇文章主要介绍了用CSS Grid布局制作一个响应式柱状图的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编
    2020-05-26
  • 解决CCS中的margin:top塌陷问题

    这篇文章主要介绍了CCS中的margin:top塌陷问题,本文通过实例截图给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-27
  • css如何利用负margin技术实现平均布局

    这篇文章主要介绍了css如何利用负margin技术实现平均布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一
    2020-03-09
  • CSS 外边距(margin)重叠及防止方法

    这篇文章主要介绍了CSS 外边距(margin)重叠及防止方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-14
  • 解决margin 外边距合并问题

    这篇文章主要介绍了解决margin 外边距合并问题 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-03
  • css 布局 之 两端布局的实例代码 (利用父级负的margin)

    这篇文章主要介绍了css 布局 之 两端布局 (利用父级负的margin)的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋
    2020-06-08

最新评论

深高CWB1(580014)

上汽CWB1(580016)

赣粤CWB1(580017)

石化CWB1(580019)

上港CWB1(580020)

青啤CWB1(580021)

国电CWB1(580022)

康美CWB1(580023)

宝钢CWB1(580024)

葛洲CWB1(580025)