CSS Flex Direction (flex-direction) Explained - Beginner Flexbox Tutorial

In this tutorial, we look at how to use "flex-direction" in CSS Flexbox.

"flex-direction" is applied to the parent flex container and lets us control the direction in which flex items are laid out inside of our flex container.

The default value is "row", where child items are laid out along the horizontal axis. The other values are "column"—which lays child items out along the vertical axis—along with "row-reverse" and "column-reverse", which use the same row and column directions but reverse the visible order of our flex items.

Our flex-direction value directly affects the direction of the main axis and cross axis, which are important when aligning items inside a flex container. The main axis always follows the flex direction, and the cross axis is always the opposite of the main axis.

I hope you found this video useful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.

TIMESTAMPS:
00:00 Introduction
00:21 What is flex-direction?
00:42 Rows vs. columns
01:36 How to apply the flex-direction property
03:18 "row-reverse" and "column-reverse"
03:57 Accessibility issues with flex-direction
04:45 Flex-direction and the "main axis" & "cross axis"
05:55 Summary

WATCH NEXT: