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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 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
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
设定php简写功能的方法
2019/11/28 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
webpack4简单入门实例
2018/09/06 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python的另外几种语言实现
2015/01/29 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
简单讲解Python中的闭包
2015/08/11 Python
python 换位密码算法的实例详解
2017/07/19 Python
windows下python和pip安装教程
2018/05/25 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
网上书店创业计划书
2014/01/12 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
2016年寒假见闻
2015/10/10 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
mysql幻读详解实例以及解决办法
2022/06/16 MySQL