css3 flex布局 justify-content:space-between 最后一行左对齐


Posted in HTML / CSS onJanuary 02, 2020

在使用justify-content:space-between布局时,针对最后一行元素使用 justify-self: start;没有效果,查了下css3 flexbox 还未支持。

那么如何实现最后一行左对齐呢?

现有的几个方案

  • 使用标签元素补全缺的item
  • 使用grid
  • 使用伪类

伪类的情况,如果最后一个元素是满的,会有占位,grid会有兼容问题,又不想新增标签。

每一行固定列数的情况实现左对齐方案

由于每一列的数目都是固定的,因此,我们可以计算出最后一个元素的margin-right值保证完全左对齐。

假设每一行只有3列元素,那么当最后一个元素是第二列(即li:last-child:nth-child(3n + 2))的情况,才需要进行 margin-right处理,距离是一个元素的宽度+空隙宽度。

假设元素宽度是$width,上述情况所需要的距离:(100% - 3 * $width) / 2 + $width => (100% - $width) / 2

.list1  li:last-child:nth-child(3n + 2) {
  margin-right: calc((100% - $width) / 2);
}

css3 flex布局 justify-content:space-between 最后一行左对齐

同理,一行4列的情况,需要处理两种情况,最后一个元素在第二列 和 最后一个元素在第三列的情况。

.list2  li:last-child:nth-child(4n + 2) {
  margin-right: calc((100% - $width) / 3 * 2);
}
.list2  li:last-child:nth-child(4n + 3) {
  margin-right: calc((100% - $width) / 3 * 1);
}

css3 flex布局 justify-content:space-between 最后一行左对齐

点击这里查看demo 展示代码

每一行不固定列数的情况实现左对齐方案

这个我觉得最好的方案还是使用grid了,网上一堆,就不做讨论啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
详解CSS3新增的背景属性
Dec 25 #HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 #HTML / CSS
css3实现背景动态渐变效果
Dec 10 #HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 #HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 #HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 #HTML / CSS
CSS3 新增选择器的实例
Nov 13 #HTML / CSS
You might like
提问的智慧(2)
2006/10/09 PHP
javascript页面加载完执行事件代码
2014/02/11 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
JS验证字符串功能
2017/02/22 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python求绝对值的三种方法小结
2019/12/04 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
C#基础面试题
2016/10/17 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
销售冠军获奖感言
2014/02/03 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
捐书活动倡议书
2015/04/27 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python