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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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

    By default the flex container lays out flex items on a single line 0:00
    called a flex line. 0:04
    The flex container tries to fit all items on one flex line 0:06
    even if it causes its contents to overflow. 0:10
    In the work space preview, when I re-size the browser and the flex container starts 0:14
    to get narrower, the flex items overflow the boundaries of the flex container. 0:18
    But the flex container can break items onto multiple flex lines and 0:25
    allow them to wrap as needed like this. 0:29
    With the flex-wrap property, 0:33
    you can control whether the flex container is a single line or multi-line layout. 0:35
    So back in flexbox.css, inside the container rule, 0:41
    I'm going to add the class flex-wrap and set the value to wrap. 0:45
    So now, 0:51
    when there isn't enough room on one line, the flex items wrap to the next line. 0:52
    And they wrap in the direction of the main axis. 0:57
    So, now we have a multi-lined flex container and 1:00
    the same wrapping behavior applies when the flex-direction is set to column. 1:03
    So back in the container rule, 1:08
    I'll add the flex-direction property and set the value to column. 1:10
    Nothing too exciting happens yet, but watch what happens if I limit 1:17
    the vertical space by giving the flex container a fixed height of 280 pixels. 1:23
    So now when the flex container runs out of vertical space, 1:34
    the flex items wrap to multiple columns. 1:38
    Even if I add more items to the flex container, 1:44
    the browser fills the space inside the flex container in 1:49
    the most efficient way possible by wrapping the items as needed. 1:54
    Pretty amazing. 2:00
    Applying the flex-wrap property to a flex item will not have any effect. 2:02
    The flex-wrap property works when applied to flex containers only. 2:07
    So now you can start thinking about how you can use flex-wrap 2:11
    in a responsive layout. 2:14
    For instance, you might have a row of columns that are flex items. 2:16
    Once the viewpoint or device starts to get narrow and the columns run 2:20
    out of space on the flex line, they can automatically wrap to the next line. 2:24
    You'll learn more about Flexbox column layout in the next section of this course. 2:29

    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