1. css
  2. /properties
  3. /flex-flow

flex-flow

Definition

The flex-flow property in CSS is a shorthand property that sets the flex-direction and flex-wrap properties in a single declaration.

Examples

Set the flex-flow property to row wrap:

.flex-container {
  flex-flow: row wrap;
}

Set the flex-flow property to column nowrap:

.flex-container {
  flex-flow: column nowrap;
}

Set the flex-flow property to row-reverse wrap-reverse:

.flex-container {
  flex-flow: row-reverse wrap-reverse;
}

Values

SyntaxDescription
flex-flow: <flex-direction> <flex-wrap>;A shorthand property for setting the flex-direction and flex-wrap properties in a single declaration.

Best Practices

  • Use the flex-flow property as a shorthand for setting the flex-direction and flex-wrap properties in a single declaration.
  • Consider using CSS frameworks like Bootstrap or Foundation to manage the layout of your site, which often include built-in styles for flexbox.
  • Make sure to provide a meaningful fallback for browsers that do not support the flex-flow property.
  • Keep in mind that the value of flex-flow affects the layout of flex items along the main axis and the cross axis of the flex container.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes