Distributing Space Inside a Flex Container5:55 with Guil Hernandez
The justify-content property lets you control the position and alignment of flex container items on the main axis, as well as how much space is between flex items. Learn about how to manipulate flex spacing using `justify-content`, `justify-content: space-between`, and `margin: auto`.
- 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, and between the end edge and the last 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