CSS3弹性布局内容对齐(justify-content)属性使用详解


Posted in HTML / CSS onJuly 31, 2017

内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。

该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。

注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是屏幕上的行向和列向(但是严格讲,这和写模式以及弹性流方向有关)。

那么main-start和main-end就可以分别被看作是弹性容器的左右边。

justify-content语法如下:

justify-content: flex-start | flex-end | center | space-between | space-around

参数说明如下:

flex-start

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。

flex-end

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。

center

弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。

space-between

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。

space-around

弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。

justify-content属性取值效果示例

CSS3弹性布局内容对齐(justify-content)属性使用详解

上图很直观的演示了以上5个取值的效果和差异。

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

HTML / CSS 相关文章推荐
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 #HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 #HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 #HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 #HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 #HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 #HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 #HTML / CSS
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Expandable "Detail" Table Rows
2007/08/29 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
javascript canvas检测小球碰撞
2020/04/17 Javascript
python保存二维数组到txt文件中的方法
2018/11/15 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
技术总监管理职责范本
2014/03/06 职场文书
护林防火标语
2014/06/27 职场文书
小学庆六一活动总结
2014/08/28 职场文书
丧事答谢词
2015/01/05 职场文书
2015年端午节活动总结
2015/02/11 职场文书
婚宴新娘致辞
2015/07/28 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Django基础CBV装饰器和中间件
2022/03/22 Python