Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Wrapping Flex Items2: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.
flex-wrapproperty 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-wrapproperty, you can control whether the flex container is a single-line or multi-line layout.
- The value
wrapbreaks the flex items into multiple lines.
By default 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 it causes its contents to overflow.
In the work space preview, when I re-size the browser and the flex container starts
to get narrower, the flex items overflow the boundaries of the flex container.
But the flex container can break items onto multiple flex lines and
allow them to wrap as needed like this.
With the flex wrap property,
you can control whether the flex container is a single line or multi-line layout.
So back in flexbox.css, inside the container rule,
I'm going to add the class flex-wrap and set the value to wrap.
when there isn't enough room on one line, the flex items wrap to the next line.
And they wrap in the direction of the main axis.
So, now we have a multi-lined flex container and
the same wrapping behavior applies when the flex direction is set to column.
So back in the container rule,
I'll add the flex-direction property and set the value to column.
Nothing too exciting happens yet, but watch what happens if I limit
the vertical space by giving the flex container a fixed height of 280 pixels.
So now when the flex container runs out of vertical space,
the flex items wrap to multiple columns.
Even if I add more items to the flex container,
the browser fills the space inside the flex container in
the most efficient way possible by wrapping the items as needed.
Applying the flex wrap property to a flex item will not have any effect.
The flex wrap property works when applied to flex containers only.
So now you can start thinking about how you can use flex wrap
in a responsive layout.
For instance, you might have a row of columns that are flex items.
Once the viewpoint or device starts to get narrow and the columns run
out of space on the flex line, they can automatically wrap to the next line.
You'll learn more about Flexbox column layout in the next section of this course.
You need to sign up for Treehouse in order to download course files.Sign up