For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/api/css/properties/flex-flow.md.
Lynx
  • English
  • 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

    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.