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开启硬件加速的使用和坑
Aug 21 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 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自动适应范围的分页代码
2008/08/05 PHP
php mssql 时间格式问题
2009/01/13 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
laravel入门知识点整理
2020/09/15 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
python 删除非空文件夹的实例
2018/04/26 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
pandas数据拼接的实现示例
2020/04/16 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python -v 报错问题的解决方法
2020/09/15 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
初一地理教学反思
2014/01/16 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
网络研修心得体会
2016/01/08 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python