首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

flex-flow

CSSflex-flow属性是 flex-direction 和 flex-wrap 的简写。

代码语言:javascript
复制
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;

初始值

作为简写的每个属性:flex-direction:row flex-wrap:nowrap

适用于

柔性容器

遗传

没有

媒体

视觉

计算值

作为简写的每个属性:flex-direction:如指定的flex-wrap:所指定的那样

动画类型

离散的

规范的顺序

出现在价值形式语法中的次序

  • flex-direction*row
  • flex-wrap*nowrap
代码语言:txt
复制
Applies to flex containers   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:
  • flex-direction*具体规定
  • flex-wrap*具体规定
代码语言:txt
复制
Animation type discrete   Canonical order order of appearance in the formal grammar of the values  

见使用CSS柔性盒有关更多属性和信息的信息。

语法

取值

flex-directionflex-wrap有关值的详细信息。

形式语法

代码语言:javascript
复制
<'flex-direction'> || <'flex-wrap'>

实例

代码语言:javascript
复制
element { 
  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
  flex-flow: column-reverse wrap;            
}

规范

Specification

Status

Comment

CSS Flexible Box Layout ModuleThe definition of 'flex-flow' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Firefox (Gecko)

Chrome

Edge

Internet Explorer

Opera

Safari

Basic support

28.01

21.0-webkit 29.0

(Yes)-webkit (Yes)

11

12.10

6.1-webkit

Feature

Firefox Mobile (Gecko)

Android

Edge

IE Phone

Opera Mobile

Safari Mobile

Basic support

28.01

?

(Yes)-webkit (Yes)

11

12.10

7.1-webkit

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com