Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
community
html
flex
communitycreator

What is the CSS flex-flow property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The flex-flow property in CSSCascade Style Sheets is used to define the main and the cross axes of the flex container. It is a shorthand property of the following:

  • flex-direction
  • flex-wrap

Note: This property has no effect on non-flexible items.

Syntax

flex-flow: flex-direction flex-wrap|initial|inherit;

Property values

  • flex-direction: This value is used to specify the direction of the flex items. Possible values of the flex-direction are: row, row-reverse, column, and column-reverse.

  • flex-wrap: This value is used to specify whether we want to wrap the flex items or not. Possible values of the flex-wrap are: wrap, nowrap, and wrap-reverse.

  • initial: This sets the value to its default value.

  • inherit: This value inherits the property from its parent value.

Code

The basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the flex-flow property is as follows:

Using the "flex-flow" property

In this example, we can see that we made three boxes and set the flex-flow to row-reverse in line 8. Therefore, we can see that all the boxes appear in the reverse direction in the output. We can set the flex-flow of our choice.

RELATED TAGS

css
community
html
flex
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring