Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Flexbox Layout

Well done!

You have completed CSS Flexbox Layout!

Sign up for Treehouse Back to Library

Growing Flex Items

3:42 with Guil Hernandez

With flexbox you can make flex items grow or shrink in relation to other flex items and the available space inside the flex container.

Resources

Video review

  • The flex-grow property applies to flex items only.
  • flex-grow determines how much of the available space inside the flex container an item should take up; it assigns more or less space to flex items.
  • A flex-grow value of 1 expands flex items to take up the full space of a line.
  • The higher the flex-grow value, the more an item grows relative to the other items.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    items and the available space inside the flex container. 0:00
    For example, I can expand the flex items so 0:00
    that they fill up the entire flex container. 0:03
    Then I can expand the first, second, 0:06
    or any flex item to take up more space in the container. 0:08
    The flex-grow property determines how much of the available space 0:12
    inside the flex-container an item should take up. 0:16
    So, it assigns more or less space to flex items. 0:19
    By default, flex items in a flex container do not take up the full space of a line. 0:23

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up