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制作精致的照片墙特效
Jun 07 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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
用PHP生成自己的LOG文件
2006/10/09 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php四种定界符详解
2017/02/16 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
利用django如何解析用户上传的excel文件
2017/07/24 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
python如何实时获取tcpdump输出
2020/09/16 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
HTML5新标签兼容——> 的两种方法
2018/09/12 HTML / CSS
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
优秀体育委员自荐书
2014/01/31 职场文书
消防先进事迹材料
2014/02/10 职场文书
购房协议书范本
2014/04/11 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
乱世佳人观后感
2015/06/08 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS