Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Flexbox Layout!
You have completed CSS Flexbox Layout!
Preview
In this video, you'll learn how simple it is to control the direction of your flexbox layout, with the flex-direction property.
Resources
Video review
- Some flexbox properties apply to the flex container only, while some apply only to the flex items.
- The
flex-directionproperty applies to the flex container only. - The default value for
flex-directionisrow. - To reverse the direction flex items in a row, use the value
row-reverse. - 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 valuecolumn-reverse.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
In the previous section of this course
you'll learn that giving an element
0:04
a display value of flex or inline-flex,
makes it a flex container,
0:08
the container that sets the context for
a flex box layout and contains flex items.
0:12
Once you've defined a flex container you
can start taking advantage of flex boxes'
0:17
powerful direction order,
alignment and sizing properties.
0:21
Some flex box properties apply
to the flex container only,
0:26
while some apply only to the flex items.
0:30
So it's important that you know which
properties apply to the flex containers
0:32
and flex items otherwise you might
end up using properties that have
0:35
no effect on your layout.
0:39
So throughout this section be sure to
check the teacher's notes of each video
0:41
for more information on
each flex box property.
0:44
First up, you're gonna learn how simple it
is to control the direction of your flex
0:48
box layout with the flex
direction property.
0:52
To follow along using the latest work
space, launch the work space on this page
0:55
or you can download the files to follow
along with your own text editor.
1:00
Flex items, by default,
1:05
are laid out horizontally on
the main axis from left to right.
1:07
But you can change the direction of flex
items with the flex-direction property.
1:12
For example,
1:17
I can change this layout from a horizontal
row layout to a vertical column layout.
1:18
I can even reverse the order in
which the flex items are displayed.
1:23
The flex-direction property applies
to the flex container only.
1:28
If you apply it to a flex item
it will have no affect on it.
1:31
Back in the work space I'll
open the file flexbox.css.
1:34
I'm going to add the flex direction
property inside the container rule.
1:40
The default value for
flex direction is row.
1:47
And that's what you're currently
seeing in the browser preview.
1:52
Now, to reverse the direction
of flex items that are in a row,
1:56
you use the value row-reverse.
2:00
This reverses the main axis direction.
2:06
It's the same horizontal layout as row,
except the start and
2:09
end positions of the main
axis are swapped.
2:13
So now the flex items are laid
out from right to left.
2:16
And notice how Item 1 is on the right
side of the flex container.
2:20
With the flex direction property you have
full control over the flex container's
2:25
main access, so that means you can
also switch the layout of flex items
2:29
from a horizontal row layout
to a vertical column layout.
2:34
Watch what happens when I set
the flex-direction value to column.
2:39
Pretty neat right.
2:47
So the value column
rotates the main axis so
2:48
that the flex items
are laid out vertically.
2:52
Now the start and end positions of
the main axis run from top to bottom.
2:55
Also each flex item stretches from
edge to edge of the flex container.
3:00
Like the row-reverse property,
you can swap the top to bottom
3:06
directions of the column with
the value column-reverse.
3:10
This reverses the columns
main access direction.
3:18
Item 6 is now at the top of the column.
3:19
And Item 1 is at the bottom.
3:25
Now you can start thinking how to
use flex direction in your layouts.
3:28
You may, for instance, be working on
a response of navigation where you want
3:32
the layout to be one column in small
screens and a row in wider screens.
3:36
You can simply change the flex
direction inside a media query.
3:41
You will learn more about this in
the next section of the course.
3:44
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up