From the course: Responsive Layout
Unlock the full course today
Join today to access over 24,000 courses taught by industry experts.
Aligning items on cross axis - HTML Tutorial
From the course: Responsive Layout
Aligning items on cross axis
- [Instructor] The next property is align items which aligns your flex items along the cross axis which is perpendicular to the main axis. This only applies to one row of items. In the next video we'll look at what happens if you have multiple rows because you have flex route turned on. Now looking at what we have on our page the main axis is a row, left to right, so the cross axis will be top to bottom. Align items has slightly different values than justify content even though they do something similar. The default value is stretch. I'm going to the code on the container element on line 12. I'm going to add align items, stretch, and save and refresh. And nothing changes because that's the default. Stretch makes each flex item stretch to fill the entire cross axis. This only works though if the items have a minimum height or no heights because that allows them to stretch. If I give item one a height, I'm gonna go on line 14, item one, and then height, 200 pixels, save and refresh. The…
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
-
-
-