- 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
Aligning Flex Items on the Cross Axis
3:43Learn how to align flex items on the cross axis with the align-items and align-self properties.
In an earlier video you learned how
to align flex items on the main axis
0:00
with the justify-content property.
0:05
In this video, I'll show you how to
align flex items on the cross axis
0:07
with the align-items and align-self properties.
0:11
The cross axis runs
perpendicular to the main axis.
0:15
So here in my example,
the cross axis goes from top to bottom.
0:19
So first I'm going to use
the align-items property
0:24
to align the flex items
vertically in the container.
0:28
Back inside flexbox.css,
0:30
I'll give the flex container a height
to create more vertical space.
0:34
So inside the container
rule I'll say height.
0:38
450px.
0:41
Then I'll add the align-items property.
0:42
This property works on
the flex container only.
0:47
It aligns all of the items
inside the container.
0:50
So the default value for
align-items is stretch.
0:53
The flex items stretch from the start
of the cross axis to the end.
0:59
That's why flex items
are equal height by default.
1:05
They expand or
stretch to fill the flex container.
1:08
Now if I want to align all flex items
to the start of the cross axis, so
1:12
the top edge, of this container.
1:17
I can use the value flex-start.
1:20
So, now the heights no longer
stretch from top to bottom.
1:28
The flex items are aligned to
the start of the cross access.
1:33
See if you can guess how the value
flex-end will align the flex items.
1:37
The value flex-end packs the items
toward the end of the cross axis.
1:43
Now one of the most useful values for
align-items is the value, center.
1:49
This makes centering an element inside
its container easier than ever.
1:56
You simply set the value to center and
2:00
the flex items are perfectly
centered in the cross axis.
2:03
The align items property applies to
every flex item in the flex container.
2:07
But what if you wanna align
individual flex items?
2:12
Well, the align-self property allows
alignment for individual flex items.
2:16
It also lets you override the alignment
defined in the align-items property.
2:21
I'll set align-items back to
the default stretch value
2:27
by removing the property
from the container rule.
2:31
And now I want to align Item 1 to
the top edge of the container.
2:35
Back in my style sheet, I'll target
.item-1, and I'll give it the flex item
2:41
specific align-self property,
and set the value to flex-start.
2:46
So now only item one is aligned
to the start of the cross axis.
2:55
Now if I go back and change item
one's align-self value to flex-end.
3:02
Now it's aligned to
the end of the cross axis.
3:09
Now, if I wanna align another item
to the center, let's say Item 4,
3:12
I can target item-4 in
the style sheet and
3:16
simply set its align-self
value to center.
3:22
Cool.
3:30
So as you can see, flexbox was
designed to help us with alignment.
3:32
In the next video, you'll learn how
to achieve perfect vertical and
3:37
horizontal centering in your layouts.
3:41