Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Flexbox Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Aligning Flex Items on the Cross Axis

3:43 with Guil Hernandez

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up