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

Wrapping Flex Items

2:33 with Guil Hernandez

The flex container can break flex items onto multiple lines and allow them to wrap as needed. With the flex-wrap property, you can control whether the flex container is a single-line or multi-line layout.

Resources

Video review

  • The flex-wrap property is for flex containers only.
  • The flex container lays out flex items on a single line called a flex line.
  • The flex container tries to fit all items on one flex line, even if causes its contents to overflow.
  • The flex container can break flex items into multiple flex lines and allow them to wrap as needed.
  • With the flex-wrap property, you can control whether the flex container is a single-line or multi-line layout.
  • The value wrap breaks the flex items into multiple lines.

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

    The flex container tries to fit all items on one flex line 0:00
    even if it causes its contents to overflow. 0:01
    In the work space preview, when I re-size the browser and the flex container starts 0:05
    to get narrower, the flex items overflow the boundaries of the flex container. 0:09
    But the flex container can break items onto multiple flex lines and 0:16
    allow them to wrap as needed like this. 0:20
    With the flex-wrap property, 0:24
    you can control whether the flex container is a single line or multi-line layout. 0:26

    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