Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Controlling the Direction of Flex Items3:47 with Guil Hernandez
In this video, you'll learn how simple it is to control the direction of your flexbox layout, with the flex-direction property.
- Some flexbox properties apply to the flex container only, while some apply only to the flex items.
flex-directionproperty applies to the flex container only.
- The default value for
- To reverse the direction flex items in a row, use the value
- The value
columnrotates the main axis so that flex items are laid out vertically.
- Like the
row-reverseproperty, you can swap the top-to-bottom direction of a column with the value
In the previous section of this course you'll learn that giving an element
a display value of flex or inline flex, makes it a flex container.
The container that set s the context for a flex box layout and contains flex items.
Once you've defined a flex container you can start taking advantage of flex boxes
powerful direction order, alignment and sizing properties.
Some flex box properties apply to the flex container only,
while some apply only to the flex items.
So it's important that you know which properties apply to the flex containers
and flex items otherwise you might end up using properties that have
no effect on your layout.
So throughout this section be sure to check the teacher's notes of each video
for more information on each flex box property.
First up, you're gonna learn how simple it is to control the direction of your flex
box layout with the flex direction property.
To follow along using the latest work space, launch the work space on this page
or you can download the files to follow along with your own text editor.
Flex items, by default,
are laid out horizontally on the main axis from left to right.
But you can change the direction of flex items with the flex-direction property.
I can change this layout from a horizontal row layout to a vertical column layout.
I can even reverse the order in which the flex items are displayed.
The flex-direction property applies to the flex container only.
If you apply it to a flex item it will have no affect on it.
Back in the work space I'll open the file flex box CSS.
I'm going to add the flex direction property inside the container rule.
The default value for flex direction is row.
And that's what you're currently seeing in the browser preview.
Now, to reverse the direction of flex items that are in a row,
you use the value row-reverse.
This reverses the main axis direction.
It's the same horizontal layout as row, except the start and
end positions of the main axis are swapped.
So now the flex items are laid out from right to left.
And notice how Item 1 is on the right side of the flex container.
With the flex direction property you have full control over the flex container's
main access, so that means you can also switch the layout of flex items
from a horizontal row layout to a vertical column layout.
Watch what happens when I set the flex-direction value to column.
Pretty neat right.
So the value column rotates the main axis so
that the flex items are laid out vertically.
Now the start and end positions of the main axis run from top to bottom.
Also each flex item stretches from edge to edge of the flex container.
Like the row-reverse property, you can swap the top to bottom
directions of the column with the value column-reverse.
This reverses the columns main access direction.
Item 6 is now at the top of the column.
And Item 1 is at the bottom.
Now you can start thinking how to use flex direction in your layouts.
You may, for instance, be working on a response of navigation where you want
the layout to be one column in small screens and a row in wider screens.
You can simply change the flex direction inside a media query.
You will learn more about this in the next section of the course.
You need to sign up for Treehouse in order to download course files.Sign up