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

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