From the course: Responsive Layout
Unlock the full course today
Join today to access over 24,000 courses taught by industry experts.
Distributing space to flex items - HTML Tutorial
From the course: Responsive Layout
Distributing space to flex items
- [Instructor] Next, we'll look at flex-grow. Flex-grow is similar to the FR unit in grid in that it allows you to distribute the remaining space among the flex items. By default, flex items only take up as much space as the content requires. If you set flex-grow on one or more items, those items will expand to fill the width of the container. Flex-grow is a unitless number, and it has to be positive. So, going into the code, on line 13, for item3, I'm going to add flex-grow one, and save, and refresh. With one item given a flex-grow value, it expands all the way to fill the available space in the container. If we add flex-grow to another item, over in the code, on line 16, I'm going to have item4, flex-grow one, save, and refresh. So, together, both of those grow to fill the available space. They both have a value of one, so they split the space evenly. If we change the flex-grow value on one of them, they will share the space in proportion to their flex-grow numbers, as long as…
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
-
-
-