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 justified 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 a line 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 aligned 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 four in the style sheet And 3:16 simply set it's align self value to center. 3:22 Cool. 3:30 So as you can see, flex box 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