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对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php获取操作系统语言代码
2013/11/04 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP7.0版本备注
2015/07/23 PHP
window.location.hash 使用说明
2010/11/08 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
js 窗口抖动示例
2013/09/04 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
python原始套接字编程示例分享
2014/02/21 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python3生成手写体数字方法
2018/01/30 Python
详解python数据结构和算法
2019/04/18 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
上海方立数码笔试题
2013/10/18 面试题
初级Java程序员面试题
2016/03/03 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
工作散漫检讨书
2014/09/16 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
大学生受助感言
2015/08/01 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle