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-itemsproperty applies to flex containers only. - The
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-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 this video, I'll show you how to
align flex items on the cross axis
0:00
with the align-items and align-self properties.
0:02
The cross axis runs
perpendicular to the main axis.
0:06
So here in my example,
the cross axis goes from top to bottom.
0:10
So first I'm going to use
the align-items property
0:15
to align the flex items
vertically in the container.
0:19
Back inside flexbox.css,
0:21
I'll give the flex container a height
to create more vertical space.
0:25
So inside the container
rule I'll say height.
0:29
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