flex-flow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

概述

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

初始值as each of the properties of the shorthand:
适用元素flex containers
是否是继承属性否
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

更多信息参见 使用 CSS 弹性盒 (en-US)

语法

Formal syntax: 

flex-flow = 
  <'flex-direction'>  ||
  <'flex-wrap'>

取值

更多取值信息请查看 flex-direction (en-US) 和 flex-wrap (en-US)

示例

css

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
CSS Flexible Box Layout Module Level 1
# flex-flow-property

浏览器兼容性

BCD tables only load in the browser

另参见