From the course: Responsive Layout
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Aligning items on main axis - HTML Tutorial
From the course: Responsive Layout
Aligning items on main axis
- [Instructor] Justify-content determines how the flex items are aligned on the main axis. The default value for this is flex start. This means that the content is aligned beginning at the start of the main axis. In this case, that's the left of the horizontal axis. Note that the value is different than Grid. There it is just start. Here it is flex-start. So in container, I am going to add justify-content and then flex dash start and save. And nothing changes because that's the default value. If we change that to flex-end, save and refresh, the content is all pushed to the end of the main axis. So this isn't changing the order of items to start at the end of the axis like when we had flex direction. It's just changing the alignment so all the items are moved together over to the end. The third option is center. So on line 12, I'm gonna change this to center and save and refresh, and now they're centered. There are three other values, the same as the ones you have in grid. The next is…
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
-
Direction3m 36s
-
Wrapping2m 30s
-
Ordering flex items1m 28s
-
Flexbox alignment overview1m 39s
-
Aligning items on main axis3m 16s
-
Aligning items on cross axis3m 35s
-
Aligning lines on cross axis3m 15s
-
Aligning individual flex items1m 38s
-
Distributing space to flex items4m 43s
-
Challenge: Floats to flexbox1m 21s
-
Solution: Floats to flexbox8m 17s
-
-
-