详解Flexible弹性盒子模型之CSS flex-flow属性

高洛峰
Release: 2017-03-15 10:56:59
Original
2448 people have browsed it


实例

让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行:

  1. display:flex;

  2. flex-flow:row-reverse wrap;

 

效果预览


浏览器支持

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

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

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

定义和用法

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

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

flex-wrap 属性规定灵活项目是否拆行或拆列。

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

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

 


CSS 语法


flex-flow: flex-direction flex-wrap|initial|inherit;

属性值

描述
flex-direction可能的值:

row
row-reverse
column
column-reverse
initial
inherit

默认值是 "row"。

规定灵活项目的方向。

flex-wrap可能的值:

nowrap
wrap
wrap-reverse
initial
inherit

默认值是 "nowrap"。

规定灵活项目是否拆行或拆列。

initial设置该属性为它的默认值。请参阅 initial
inherit从父元素继承该属性。请参阅 inherit

The above is the detailed content of 详解Flexible弹性盒子模型之CSS flex-flow属性. 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!