The CSS Flex-Direction Property

Understanding CSS flex direction

The CSS flex-direction property allows you to modify item placement in the flex container:

div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: column-reverse; /* Safari 6.1 and newer */
    display: flex;
    flex-direction: column-reverse;   
}

Syntax requirements

The syntax for CSS flex-direction is simple, as you only need to define one out of four available values:

flex-direction: value;

You can see the choice of values in the table below.

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

100% FREE

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

100% FREE

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

100% FREE

CSS flex-direction property values

Browser support

Chrome

29+

Edge

12+

Firefox

20+

IE

11+

Opera

12.1+

Safari

9+

Mobile browser support

Chrome

29+

Firefox

20+

Opera

12.1+

Safari

9+