How and When to Use the CSS Flex-Flow Shorthand

1. Using CSS flex-flow
2. The Syntax for flex flow
2.1. Values for flex-wrap
2.2. Values for flex-direction
3. Browser support

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;
}

Try it Live Learn on Udacity

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.

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

GET 50% OFF

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

UP TO 70% OFF

Pros

A wide range of learning programs
University-level courses
Easy to navigate
Verified certificates
Free learning track available

Main Features

University-level courses
Suitable for enterprises
Verified certificates of completion

FREE COURSES

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

Chrome

29+

Edge

12+

Firefox

28+

IE

11+

Opera

12.1+

Safari

Mobile browser support

Chrome

29+

Firefox

28+

Opera

12.1+

Safari

Previous Topic Next Topic

The CSS Flex-Flow Property

Contents

Using CSS flex-flow