您现在的位置是：网站首页> 编程资料编程资料

CSS columns实现两端对齐布局的示例代码使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码用CSS Grid布局制作一个响应式柱状图的实现解决CCS中的margin：top塌陷问题css如何利用负margin技术实现平均布局CSS 外边距(margin)重叠及防止方法解决margin 外边距合并问题 css 布局之两端布局的实例代码（利用父级负的margin）

2023-10-18 391人已围观

简介这篇文章主要介绍了CSS columns实现两端对齐布局效果,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、兜兜转转一大圈

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

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

 .container { columns: 3 30px; }

叮咚，结束了，game over~

简单到令人发指。

不要怀疑，看一个实时渲染的例子吧：

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

实时渲染效果如下

二、columns实现的优缺点

优点

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

例如，浏览器默认状态下，

元素会出现项目符号，例如圆点，或数字序号。

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

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

可以看到

元素子元素既保持了两端对齐效果，

元素自身默认自带的圆点符号也保留了，如下图所示。

这是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的clip-path属性实现不规则图形的显示使用css实现特殊标志或图形css如何绘制特殊图形的方法示例详解常用css样式(布局)详解CSS3中常用的样式【基本文本和字体样式】编程式处理Css样式的示例代码使用CSS伪元素控制连续几个元素的样式方法纯CSS3 gradient属性制作36种漂亮的html网页渐变按钮样式css样式常见图形效果展示的实例代码

下一篇：CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解css实现隐藏滚动条并可以滚动内容的实例代码CSS实现导航固定的、左右滑动的滚动条制作方法CSS实现隐藏滚动条并可以滚动内容效果(三种方式)css滚动条样式修改的代码css3 实现滚动条美化效果的实例代码

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢