- Controlling the Direction of Flex Items 3:47
- Wrapping Flex Items 2:33
- Distributing Space Inside a Flex Container 5:55
- Changing the Order of Flex Items 5:32
- Wrapping Items and Distributing Space 3 objectives
- Growing Flex Items 3:42
- Smarter Layouts with flex-basis and flex 6:42
- Aligning Flex Items on the Cross Axis 3:43
- Growing and Aligning Flex Items 3 objectives
- Vertical and Horizontal Centering 4:14
- Flexbox Properties Review 6 questions
Preview
Video Player
00:00
00:00
Controlling the Direction of Flex Items
3:47In this video, you'll learn how simple it is to control the direction of your flexbox layout, with the flex-direction property.
[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