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的@media来编写响应式的页面
Nov 01 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
html5拖拽应用记录及注意点
May 27 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
php算法实例分享
2015/07/14 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python实现五子棋人机对战游戏
2020/03/25 Python
给我一面国旗 python帮你实现
2019/09/30 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
贷款担保申请书
2014/05/20 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS