🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Curious which AI tools Treehouse developers love? ⚙️ Check them out!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Distributing Space Inside a Flex Container

5: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`.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Video review

You apply the justify-content property to flex containers only.
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.
The default value for justify-content is flex-start, which places items towards the start of each flex line.
To place items at the end of the flex line, set justify-content to flex-end.
The value center places 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-between displays equal spacing between flex items.
For equal spacing around every flex item, use the value space-around.
A margin set to auto will absorb any extra space around a flex item and push other flex items into different positions.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

Flexbox is, well, flexible. 0:10

So it can distribute available space intelligently. 0:13

You see, when you set an element's 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' 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 property 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

justifiy-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 values 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 justify-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-1. 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-1's right margin is set to auto, the browser automatically 4:52

inserts an 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

You need to sign up for Treehouse in order to set up Workspace

Sign up