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

Smarter Layouts with flex-basis and flex

6:42 with Guil Hernandez

Learn how the flex-basis property gives you even more control over the size of flex items, and how the flex shorthand property intelligently sets flexbox values when you don't specify them.

Resources

Video review

  • flex and flex-basis apply to flex items only.
  • flex-basis specifies the initial main size of a flex item.
  • You set the initial size you want the flex items to be, then flexbox evenly distributes the free space according that size.
  • flex is the shorthand for flex-grow, flex-basis and flex-shrink.
  • Using only one number value for flex sets the flex-grow value of an item.
  • The second and third values are optional in the flex shorthand.
  • Setting only one number value for flex automatically sets the flex-basis value to 0.

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

    In the index.html file the flex container now contains only four items. 0:00
    I added content inside each flex item. 0:04
    Some items have more content than others, 0:08
    as you can see here in the workspace preview. 0:10
    Back in flexbox.css when I target the items and 0:12
    set their flex-grow value to one. 0:17
    The browser tries its best to equally distribute the space inside the container. 0:24

    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