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 相关文章推荐
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
10个实用的PHP代码片段
2011/09/02 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
JavaScript 作用域实例分析
2019/10/02 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
使用Python绘制图表大全总结
2017/02/11 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
有针对性的求职自荐信
2013/11/14 职场文书
企业军训感言
2014/02/08 职场文书
初三开学计划书
2014/04/27 职场文书
国家助学金感谢信
2015/01/21 职场文书
python 实现图片特效处理
2022/04/03 Python