Flexible弹性盒子模型之CSS flex-direction属性

高洛峰
Release: 2017-03-15 10:17:06
Original
2540 people have browsed it


实例

设置

元素内弹性盒元素的方向为相反的顺序:

p
{
display:flex;
flex-direction:row-reverse;
}
Copy after login

效果预览


浏览器支持

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

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

属性     
flex-direction29.0
21.0 -webkit-
11.0
10.0 -ms-
28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

定义和用法

flex-direction 属性规定灵活项目的方向。

注意:如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

默认值:row
继承
动画化:否。请参阅 SS3动画属性、CSS3动画实例。
版本:CSS3
JavaScript 语法:object.style.flexDirection="column-reverse" 效果预览

 


CSS 语法


flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

属性值

描述实例
row默认值。灵活的项目将水平显示,正如一个行一样。效果预览
row-reverse与 row 相同,但是以相反的顺序。效果预览
column灵活的项目将垂直显示,正如一个列一样。效果预览
column-reverse与 column 相同,但是以相反的顺序。效果预览
initial设置该属性为它的默认值。请参阅 initial效果预览
inherit从父元素继承该属性。请参阅 inherit 

The above is the detailed content of Flexible弹性盒子模型之CSS flex-direction属性. For more information, please follow other related articles on the PHP Chinese website!

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!