flex布局最后一行元素左对齐【CSS小技巧】

作者: 前端小野2分类: 计算机技术 发布时间: 2021-06-30 09:00:15 浏览:8138 次

flex布局最后一行元素左对齐【CSS小技巧】

遍地牛烟:
加一个not选择器,最后一个不加伪类不就好了。还有一种解决方案,处理元素个数,补齐的一行个数的整数倍,反正都是一个空div,也不会展示出来

71059177237_bili:
我是在各个子节点外又包了一个节点,给最顶层的节点设置左对齐,包着的节点按百分比定宽,宽度上是均分了,子节点再写实际宽或者用百分比宽以自适应。

flycp3:
如果元素宽度不一样 你的伪元素宽度设为多少呢 还是margin-right auto 方便

zzzzz5668:
这是误导啊,都多了一行了,还没有问题

Creepre_:
但是高度是子元素撑开的,这样的话,就会出现多一排的情况

【回复】回复 @妲己是只白狐 :我一般添加的空元素是宽同其他项,高度为零,用其他元素撑起高度
【回复】回复 @Germxu :比如你一排只有三个,父元素高度是零,由子元素撑开,你只有三个子元素的时候,由于多个伪类元素,你本来是一排,但是实际就会俩排。
【回复】grid并没什么实际使用,相当复杂不说支持度也不是太好,视频这个方法其实是非常常用的,排列比较多的话可以添加空元素,设置高度为0就行了
MAMODO:
这个之前在张鑫旭博客看到过,我用了其中一种,就是要知道容器最大时可以放几个,然后生成该个数i标签,宽度和item一致,不给高度就可以了。

ro8576:
[热词系列_知识增加][热词系列_知识增加]

开心先森wj:
哈默哥,咋不说小程序了,我需要它[呲牙]

【回复】回复 @哈默聊前端 :07.01号已经更新了,不是小程序,3连催更小程序
内子语:
如果每一行列数固定,根本不需要使用space-between,用margin间隔,calc计算margin,如果每一行列数不固定,则应该使用space-between并使用0高度的空元素占位,数量为最多可能出现的列数,宽度一致,如果不考虑ie,grid布局为最优解

视频教程 野生技术协会 编程 2021一起学习 前端 WEB JAVASCRIPT VUE WEB前端 打卡挑战

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!