Aligning Flex Items on the Cross Axis3:43 with Guil Hernandez
Learn how to align flex items on the cross axis with the align-items and align-self properties.
align-itemsproperty applies to flex containers only.
align-selfproperty applies to flex items only.
align-itemsaligns flex items vertically in the flex container.
- To align all flex items to the start of the cross axis, use the
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.
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
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
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 up