1
00:00:00,240 --> 00:00:04,860
By default the flex container lays
out flex items on a single line

2
00:00:04,860 --> 00:00:06,470
called a flex line.

3
00:00:06,470 --> 00:00:10,730
The flex container tries to
fit all items on one flex line

4
00:00:10,730 --> 00:00:14,086
even if it causes its
contents to overflow.

5
00:00:14,086 --> 00:00:18,580
In the work space preview, when I re-size
the browser and the flex container starts

6
00:00:18,580 --> 00:00:24,260
to get narrower, the flex items overflow
the boundaries of the flex container.

7
00:00:25,540 --> 00:00:29,970
But the flex container can break
items onto multiple flex lines and

8
00:00:29,970 --> 00:00:33,540
allow them to wrap as needed like this.

9
00:00:33,540 --> 00:00:35,600
With the flex wrap property,

10
00:00:35,600 --> 00:00:41,130
you can control whether the flex container
is a single line or multi-line layout.

11
00:00:41,130 --> 00:00:45,520
So back in flexbox.css,
inside the container rule,

12
00:00:45,520 --> 00:00:51,740
I'm going to add the class flex-wrap and
set the value to wrap.

13
00:00:51,740 --> 00:00:52,430
So now,

14
00:00:52,430 --> 00:00:57,360
when there isn't enough room on one line,
the flex items wrap to the next line.

15
00:00:57,360 --> 00:01:00,440
And they wrap in the direction
of the main axis.

16
00:01:00,440 --> 00:01:03,890
So, now we have a multi-lined
flex container and

17
00:01:03,890 --> 00:01:08,430
the same wrapping behavior applies when
the flex direction is set to column.

18
00:01:08,430 --> 00:01:10,762
So back in the container rule,

19
00:01:10,762 --> 00:01:15,980
I'll add the flex-direction property and
set the value to column.

20
00:01:17,767 --> 00:01:23,325
Nothing too exciting happens yet,
but watch what happens if I limit

21
00:01:23,325 --> 00:01:29,970
the vertical space by giving the flex
container a fixed height of 280 pixels.

22
00:01:34,650 --> 00:01:38,648
So now when the flex container
runs out of vertical space,

23
00:01:38,648 --> 00:01:41,513
the flex items wrap to multiple columns.

24
00:01:44,977 --> 00:01:49,228
Even if I add more items
to the flex container,

25
00:01:49,228 --> 00:01:54,351
the browser fills the space
inside the flex container in

26
00:01:54,351 --> 00:02:00,970
the most efficient way possible
by wrapping the items as needed.

27
00:02:00,970 --> 00:02:02,150
Pretty amazing.

28
00:02:02,150 --> 00:02:07,480
Applying the flex wrap property to
a flex item will not have any effect.

29
00:02:07,480 --> 00:02:11,490
The flex wrap property works when
applied to flex containers only.

30
00:02:11,490 --> 00:02:14,480
So now you can start thinking
about how you can use flex wrap

31
00:02:14,480 --> 00:02:16,250
in a responsive layout.

32
00:02:16,250 --> 00:02:20,490
For instance, you might have a row
of columns that are flex items.

33
00:02:20,490 --> 00:02:24,320
Once the viewpoint or device starts
to get narrow and the columns run

34
00:02:24,320 --> 00:02:29,080
out of space on the flex line, they can
automatically wrap to the next line.

35
00:02:29,080 --> 00:02:32,900
You'll learn more about Flexbox column
layout in the next section of this course.