Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Distributing Space Inside a Flex Container5:55 with Guil Hernandez
The justify-content property lets you control the position and alignment of flex Items on the main axis and how space should be distributed in a flex container.
- You apply the
justify-contentproperty to flex containers only.
justify-contentproperty lets you control the position and alignment of flex Items on the main axis and how space should be distributed in a flex container.
- The default value for
flex-start, which places items towards the start of each flex line.
- To place items at the end of the flex line, set
- The value
centerplaces flex items in the center of the line, with equal amounts of empty space between the line's start edge and the first item.
- The value
space-betweendisplays equal spacing between flex items.
- For equal spacing around every flex item, use the value
- A margin set to
autowill absorb any extra space around a flex item and push other flex items into different positions.
If you've used floats or inline block display for 0:00 layout you know that when elements run out of space they break to the next line. 0:03 Which can make parts of your layout appear broken. 0:08 Flex box is, well, flexible. 0:10 So it can distribute available space intelligently. 0:13 You see, when you set an elements display value to flex or inline flex. 0:16 Not only are you able to set a direction to how flex items are wrapped. 0:22 You're also giving the flex container the ability to change flex items width and 0:26 height to fill the space inside the flex container 0:30 in the most efficient way possible. 0:34 So the justify content property lets you control the position and 0:36 alignment of flex items on the main axis. 0:40 And how space should be distributed in a flex container. 0:43 In page.css, you can see that container has 10 pixels of padding applied, 0:48 and the items have a 5 pixel margin applied. 0:54 So, the justified content property will distribute the space that's available 0:58 after the padding and margins are accounted for. 1:03 You apply the justified content property to flex containers only. 1:06 So back in flexbox.css, 1:11 I'm going to give the container rule the class justify content. 1:14 Now the default value for justify content is flex-start. 1:21 Which places the items towards the start of each flex line. 1:25 So, what if I want to place the items at the end of the line? 1:30 Well, I can simply set the justify-content value to flex-end. 1:34 This lines the flex items to the end of the flex line, so 1:43 now I'm going to set the justify-content value to center. 1:49 See if you can guess how the flex items will align inside the flex container. 1:54 The value center places the flex items in the center of the line, 2:00 with equal amounts of empty space between the line's start edge And 2:05 the first item and between the end edge, and the last item. 2:10 Now, the most useful values for 2:16 justified content are space-between and space-around. 2:18 These values evenly distribute the available space in a line. 2:23 So there's no need for you to do any math. 2:27 The browser automatically figures out the proper amount of space. 2:29 I want the items to be spaced out evenly on this line. 2:33 Instead of spending time figuring out the fluid margin or padding valleys for this, 2:37 like you would using other CSS layout methods like floats and inline block, 2:43 I can let flex box figure out the spacing for me, so back in my container rule, 2:48 I'm going to set the justified content value to space-between. 2:53 This displays the flex items with equal spacing between them. 3:00 The first and last items are aligned to the edges of the flex container. 3:05 Then, flex box equally distributes the space between the remaining flex items, 3:11 so that the space in between them is exactly the same. 3:17 So that was pretty easy, wasn't it? 3:20 Now if you want equal spacing around every flex item, including the items 3:22 aligned to the edges of the container, you can use the value space-around. 3:28 So now the spacing between the flex items is evenly distributed. 3:36 The difference is that it distributes the space between the first and 3:41 last flex items and the container edges. 3:44 And that space is equal to half the spacing between the other flex items. 3:47 Sometimes you might not want the outer items to touch the visual edges. 3:52 Of the flex container. 3:57 So space-around is a useful value if you've set a background or 3:58 border around a container and you want more space along the edges. 4:02 Margins have a significant effect on flex items, particularly the value auto. 4:07 A margin set to auto will absorb any extra space around a flex item and 4:13 push other flex items into different positions. 4:18 Let me show you how. 4:20 Back in flexbox.css I'm going to create a new rule that targets item one. 4:21 So I'm targeting the first flex item inside the flex container. 4:28 Then I'll set its margin right value to auto. 4:34 When I refresh the browser notice how the first item is flush with the left 4:40 edge of the container, while the other flex items are placed on the right side. 4:47 Since item's one right margin is set to auto, the browser automatically 4:52 inserts and extra space between the first flex item and the remaining items. 4:58 This is a really cool feature of flex box and makes it easy to left justify 5:04 one flex item while right justifying the other flex items. 5:09 Now this would even work with several flex items. 5:13 For example you can have two flex items to the left and four to the right. 5:16 Adding margin right auto to the second item will insert 5:22 the extra space between the second flex item and the remaining items. 5:26 So the justified content property comes in handy 5:31 when styling a navigation that you want to take up an entire line. 5:34 With the links evenly distributed you can have the site logo flush 5:38 with the left margin of the container, and 5:43 the navigation menu perfectly placed on the right side, you'll learn more about 5:46 creating responsive navigations with flex box in the next section of this course. 5:51
You need to sign up for Treehouse in order to download course files.Sign up