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.

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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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+

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 19/01/2021
3176 People Used
Only 97 Left
Rating
5.0