Learn how to set the direction of a flexbox container.
- [Instructor] When you do layout with Flexbox, the default layout as you saw in the previous video is a row of flex items going from left to right. But you can also go right to left or top to bottom or bottom to top, and that's what we'll look at in this video. The flex-direction property establishes the direction of the main axis. The main axis is where most of the action is happening in Flexbox. The default is horizontal, going from left to right. The cross axis is always the direction perpendicular to the main axis.
What you see is the default positions of the main and cross axes. The default main axis is horizontal, going in the direction of text. So for most of you, that is left to right. If you are working with a language like Arabic where the text goes right to left, and you've set the text direction on the page as right to left, then the default for Flexbox is right to left. Everything horizontal in Flexbox will be the opposite direction of what I'm showing you in this video. But to avoid confusion, we're going to assume you're working with a language where the text goes from left to right.
The main axis can also be vertical. In that case, the cross axis would be horizontal. There are four possible directions for flex direction. Horizontal, either left to right or right to left and vertical, either top to bottom or bottom to top. To start out, we're going to add in the flex direction property. I'm going over to the code, I am on line 12. And I'm gonna enter flex direction row.
And save, and that's the default direction so nothing should change. So we're setting the direction of the main axis the other axis, the cross axis, is always perpendicular to the main axis so you don't ever set it. In later videos, we'll look more at what the cross axis is used for. Now if we want to change the direction of the main axis to go from right to left, we set flex direction to row reverse. So I'm gonna change this in the code on line 12 row dash reverse.
Save and refresh. Now they start on the other side with the one all the way to the right and the rest of the boxes going toward the left. They're still right next to each other and setting their own width. So horizontal is still the main axis it's just going in the opposite direction. Now let's say we want our flex items to go top to bottom, vertically instead of horizontally. I'm going to change flex direction from row reversed to column. And save.
And refresh. And now they start at the top and go down. That's the main axis going vertically top to bottom and now the cross axis is horizontal. Just like the horizontal flex items took up only as much horizontal space as they needed, these vertical flex items take up only as much vertical space as they need, they don't fill a whole height of 90 VH that we gave the container. Similarly, when we add a horizontal main axis each box filled up the full height of the container even though they didn't need the space.
Here they each use the full width of the container even though they don't need the space. This is a default and it will be one of the things we'll look at changing in an upcoming video. Setting the flex direction to column reverse makes them go in the opposite direction. So on line 12 I'm going to change column to column reverse save, and refresh. Now they start with one at the bottom and go up. That's the main axis, which is vertical and the cross axis is again horizontal.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox