Flexible 弹性盒子模型之CSS justify-content 属性

高洛峰
Release: 2017-02-23 09:51:33
Original
1878 people have browsed it


实例

在弹性盒对象的

元素中的各项周围留有空白:

  1. p

  2. {

  3. display: flex;

  4. justify-content: space-around;

  5. }





手册网(www.shouce.ren)




注意: Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。

注意: Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。

Copy after login

效果预览


浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性     
justify-content29.0
21.0 -webkit-
11.028.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

定义和用法

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

提示:使用 align-content 属性对齐交叉轴上的各项(垂直)。

默认值:flex-start
继承:
可动画化:否。请参阅 CSS3动画属性、CSS3动画实例
版本:CSS3
JavaScript 语法:object.style.justifyContent="space-between" 效果预览

 


CSS 语法


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

属性值

描述测试
flex-start默认值。项目位于容器的开头。效果预览
flex-end项目位于容器的结尾。效果预览
center项目位于容器的中心。效果预览
space-between项目位于各行之间留有空白的容器内。效果预览
space-around项目位于各行之前、之间、之后都留有空白的容器内。效果预览
initial设置该属性为它的默认值。请参阅 initial。效果预览
inherit从父元素继承该属性。请参阅 inherit。

更多Flexible 弹性盒子模型之CSS justify-content 属性相关文章请关注PHP中文网!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!