Contents
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.

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion

- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs

- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
CSS flex-direction property values
Value | Description |
---|---|
row | The default value. Items form a row along the flex container's main axis |
row-reverse | Items form a row along the flex container's main axis, but the direction is reversed |
column | Items form a column along the flex container's block axis |
column-reverse | Items form a column along the flex container's block axis, but the direction is reversed |
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera

Safari
Latest Udacity Coupon Found:
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!