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 中的@keyframes介绍
Sep 02 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
table不让td文字溢出操作方法
Dec 24 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP递归算法的简单实例
2019/02/28 PHP
JQuery写动态树示例代码
2013/07/31 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python妙用之编码的转换详解
2017/04/21 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python实现图片九宫格分割
2021/03/07 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python request中文乱码问题解决方案
2020/09/17 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
我的未来不是梦演讲稿
2014/09/02 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
2016教师国培研修感言
2015/12/08 职场文书