您现在的位置是：网站首页> 编程资料编程资料
CSS columns实现两端对齐布局的示例代码使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码用CSS Grid布局制作一个响应式柱状图的实现解决CCS中的margin：top塌陷问题css如何利用负margin技术实现平均布局CSS 外边距(margin)重叠及防止方法解决margin 外边距合并问题 css 布局 之 两端布局的实例代码 （利用父级负的margin）
2021-09-03
943人已围观
简介 这篇文章主要介绍了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样式常见图形效果展示的实例代码
- 使用CSS和Java来构建管理仪表盘布局的实例代码深入浅析CSS3中的Flex布局整理CSS实现动态图片的九宫格布局的实例代码css之display属性之inline-block布局实现详解详解CSS中的flex布局css用Flex布局制作简易柱状图的实现
- CSS如何匹配到多个class的示例代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 如何利用vw+rem进行移动端布局浅析CSS中单位px、rem、em、vh、vw之间的区别CSS 中px、em、rem、%、vw、vh单位之间的区别详解CSS3移动端vw+rem不依赖JS实现响应式布局的方法css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况浅析rem和em和px vh vw和% 移动端长度单位
- css伪类 右下角点击出现 对号角标表示选中的示例代码详解css3中的伪类before和after常见用法CSS伪类:empty让我眼前一亮(实例代码)浅谈CSS 伪元素&伪类的妙用CSS 伪类修改input选中样式的示例代码css选择器四大类：基本、组合、属性、伪类详解如何使用CSS3中的结构伪类选择器和伪元素选择器解决移动端跳转问题(CSS过渡、target伪类)css3 伪类选择器快速复习小结CSS新增的:where和:is伪类函数是什么
- 基于CSS3的animation属性实现微信拍一拍动画效果CSS3动画之利用requestAnimationFrame触发重新播放功能css动画属性使用及实例代码(transition/transform/animation) CSS3中动画属性transform、transition和animation属性的区别css动画效果之animation的常用样式
- CSS实现背景渐变和自动全屏的代码CSS3实现带视差背景渐变效果的平滑图片轮播幻灯片特效源码详解CSS背景渐变图片transtion过渡效果技巧css3编写浏览器背景渐变背景色的方法CSS3点击按钮实现背景渐变动画效果用CSS3实现背景渐变的方法
- CSS3为背景图设置遮罩并解决遮罩样式继承问题使用CSS cross-fade()实现背景图像半透明效果的示例代码完美解决webpack打包css背景图片路径问题CSS设置div背景图的实现代码CSS背景图片设置的6个有趣的技巧CSS3 实现响应鼠标移动背景图片漂移效果的用户介绍卡片源码使用css写带纹理渐变背景图的示例代码
- CSS3 box-shadow属性实例详解CSS3阴影效果样式库box-shadows.css 53种css3 box-shadow阴影(外阴影与外发光)图示讲解详解CSS3阴影 box-shadow的使用和技巧总结 CSS3实现多重边框的方法总结详解CSS3的box-shadow属性制作边框阴影效果的方法CSS3里box-shadow属性的使用方法示例详解
- CSS3新增布局之: flex详解详解CSS中的flex布局CSS中display flex整理（布局利器） CSS3 Flex 弹性布局实例代码详解css flex几种多列布局详解CSS3伸缩布局盒模型Flex布局css flex 弹性布局详解
