Wrapping Flex Items

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