Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

flex-flow

Introduction

This property is a shorthand for the CSS properties: flex-direction and flex-wrap, specifies the direction of a flex container, as well as its wrapping behavior.

Examples

css-apisrc/flex-flow/App.tsx
Preview

Syntax

/* 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;

Values

This property is a shorthand for the following CSS properties: flex-direction and flex-wrap。

Formal definition

Initial valueas each of the properties of the shorthand:
  • flex-direction: row
  • flex-wrap: nowrap
Applies toflex containers
Inheritedno
Animatable

Formal syntax

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

<flex-direction> =
  row             |
  row-reverse     |
  column          |
  column-reverse

<flex-wrap> =
  nowrap        |
  wrap          |
  wrap-reverse

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.