🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

The CSS Flex-Flow Property

Reading time 1 min
Published Aug 8, 2017
Updated Jan 21, 2020

Using CSS flex-flow

The CSS flex-flow property is actually a shorthand for flex-direction and flex-wrap properties. It sets the direction of flex items and whether they wrap in a single statement:

Example
p {
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: column wrap-reverse; /* Safari 6.1 and newer */ 
    display: flex;
    flex-flow: column wrap-reverse;
}

Note: you can only use flex-flow with flex items placed in flex containers.

The Syntax for flex flow

Using the flex-flow CSS shorthand is very simple, as you can define either one or two values in any order:

flex-flow: direction wrap;

The available values for both properties will be explained in the following sections.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Values for flex-wrap

Value Definition
nowrap The default value. All the flex items are in one line, even if they have to stick out of the borders
wrap The flex items are in several lines. Their position depends on flex-direction
wrap-reverse The flex items are in several lines. Their position is the opposite of the value in flex-direction

Values for flex-direction

Value Definition
row The default value. Sets the row of flex items in the same direction as text
row-reverse Sets the items in the direction opposite to text
column Same as row, but applies flexbox vertical align
column-reverse Same as row-reverse, but applies flexbox vertical align

Browser support

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
28+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
28+
Browser image
Opera
12.1+
Browser image
Safari
9+