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.
Flexbox alignment overview - HTML Tutorial
From the course: Responsive Layout
Flexbox alignment overview
- [Instructor] There are four different properties in Flexbox that are used to align and position flex items. This is only an overview of the difference between the four properties. We'll look at all the possible values over the next few videos. Note that the property names are the same as some of the Grid properties, and they are fairly similar in how they work. One thing that you need to remember that is different for Flexbox than for Grid is that you can change the direction of the flex container using flex direction, so all of these properties apply along a particular axis, whichever direction it is going. First, there's justify-content. This positions the flex items along the main axis within the flex container. If you're using the default flex direction, then it's left to right. This property is applied to the container element. Note that the values are slightly different than for Grid. For all of the Flexbox properties, instead of start and end, the values are flex-start and…
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
-
-
-