From the course: Responsive Layout
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Aligning individual flex items - HTML Tutorial
From the course: Responsive Layout
Aligning individual flex items
- [Instructor] If you want to take an individual flex item and give it a different alignment than the other items in the container, align-self is the property you would use. So for example, let's take flex item two. The default value for align-self is auto, which means it just follows whatever you assign to the container with the align items property. In this case we have align items set to flex-end, so all the flex items are aligned to the end of the cross axis. So I'm going to go in the code on line 17 and I'm gonna add for item two, I'm gonna change align-self to flex-start, and then save and refresh. Doing that just means that that one item changes aligning to the start of the cross axis. Flex-end, I'm changing that in line 18, and refresh, flex-end aligns it to the end of the cross axis in that row. And that's what we've already set for align item, so it just matches the other items. The next value is center, I'm gonna enter in the code, and save and refresh. And that centers it…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Defining a flexbox container1m 53s
-
(Locked)
Direction3m 36s
-
(Locked)
Wrapping2m 30s
-
(Locked)
Ordering flex items1m 28s
-
(Locked)
Flexbox alignment overview1m 39s
-
(Locked)
Aligning items on main axis3m 16s
-
(Locked)
Aligning items on cross axis3m 35s
-
(Locked)
Aligning lines on cross axis3m 15s
-
(Locked)
Aligning individual flex items1m 38s
-
(Locked)
Distributing space to flex items4m 43s
-
(Locked)
Challenge: Floats to flexbox1m 21s
-
(Locked)
Solution: Floats to flexbox8m 17s
-
-
-