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
Learn how to align flex items on the cross axis with the align-items and align-self properties.
Resources
Video review
- The
align-items
property applies to flex containers only. - The
align-self
property applies to flex items only. -
align-items
aligns flex items vertically in the flex container. - To align all flex items to the start of the cross axis, use the
align-items: flex-start;
. -
align-items: flex-end;
packs the items toward the end of the cross axis. -
align-items: center;
perfectly centers items along the cross axis. -
align-self: flex-start;
aligns a flex item to the start of the cross axis. -
align-self: flex-end;
aligns a flex item to the end of the cross axis. -
align-self: center;
aligns a flex item to the center of the cross axis.
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
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
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