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.

Distributing space to flex items

Distributing space to flex items - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

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…

Contents