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 弹性盒

语法

css
/* 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'> 和 <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* 全局值 */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;

取值

更多取值信息请查看 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

参见