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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
2013年高中生自我评价
2013/10/23 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书