- Controlling the Direction of Flex Items 3:47
- Wrapping Flex Items 2:33
- Distributing Space Inside a Flex Container 5:55
- Changing the Order of Flex Items 5:32
- Wrapping Items and Distributing Space 3 objectives
- Growing Flex Items 3:42
- Smarter Layouts with flex-basis and flex 6:42
- Aligning Flex Items on the Cross Axis 3:43
- Growing and Aligning Flex Items 3 objectives
- Vertical and Horizontal Centering 4:14
- Flexbox Properties Review 6 questions
Preview
Video Player
00:00
00:00
Distributing Space Inside a Flex Container
5:55The 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`.
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