Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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-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
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