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.