1
00:00:00,220 --> 00:00:03,240
If you've used floats or
inline-block display for

2
00:00:03,240 --> 00:00:08,150
layout you know that when elements run
out of space they break to the next line,

3
00:00:08,150 --> 00:00:10,930
which can make parts of
your layout appear broken.

4
00:00:10,930 --> 00:00:13,070
Flexbox is, well, flexible.

5
00:00:13,070 --> 00:00:16,040
So it can distribute available
space intelligently.

6
00:00:16,040 --> 00:00:22,370
You see, when you set an element's display value to flex or inline-flex,

7
00:00:22,370 --> 00:00:26,860
not only are you able to set a direction to how flex items are wrapped,

8
00:00:26,860 --> 00:00:30,880
you're also giving the flex container the ability to change flex items'

9
00:00:30,880 --> 00:00:34,630
height to fill the space
inside the flex container

10
00:00:34,630 --> 00:00:36,760
in the most efficient way possible.

11
00:00:36,760 --> 00:00:40,910
So the justify-content property
lets you control the position and

12
00:00:40,910 --> 00:00:43,730
alignment of flex items on the main axis.

13
00:00:43,730 --> 00:00:46,800
And how space should be
distributed in a flex container.

14
00:00:48,270 --> 00:00:54,600
In page.css, you can see that container
has 10 pixels of padding applied,

15
00:00:54,600 --> 00:00:58,960
and the items have a 5
pixel margin applied.

16
00:00:58,960 --> 00:01:03,990
So, the justified-content property will
distribute the space that's available

17
00:01:03,990 --> 00:01:06,960
after the padding and
margins are accounted for.

18
00:01:06,960 --> 00:01:11,710
You apply the justified-content
property to flex containers only.

19
00:01:11,710 --> 00:01:14,510
So back in flexbox.css,

20
00:01:14,510 --> 00:01:19,770
I'm going to give the container
rule the property justify-content.

21
00:01:21,340 --> 00:01:25,970
Now the default value for
justify-content is flex-start,

22
00:01:25,970 --> 00:01:30,460
which places the items towards
the start of each flex line.

23
00:01:30,460 --> 00:01:34,780
So, what if I want to place
the items at the end of the line?

24
00:01:34,780 --> 00:01:43,930
Well, I can simply set
the justify-content value to flex-end.

25
00:01:43,930 --> 00:01:49,340
This lines the flex items to
the end of the flex line, so

26
00:01:49,340 --> 00:01:54,030
now I'm going to set
the justify-content value to center.

27
00:01:54,030 --> 00:01:57,405
See if you can guess how the flex items
will align inside the flex container.

28
00:02:00,740 --> 00:02:05,668
The value center places the flex
items in the center of the line,

29
00:02:05,668 --> 00:02:10,869
with equal amounts of empty space
between the line's start edge and

30
00:02:10,869 --> 00:02:16,410
the first item and
between the end edge and the last item.

31
00:02:16,410 --> 00:02:18,260
Now, the most useful values for

32
00:02:18,260 --> 00:02:23,180
justifiy-content are space-between and
space-around.

33
00:02:23,180 --> 00:02:27,280
These values evenly distribute
the available space in a line.

34
00:02:27,280 --> 00:02:29,350
So there's no need for you to do any math.

35
00:02:29,350 --> 00:02:33,450
The browser automatically figures
out the proper amount of space.

36
00:02:33,450 --> 00:02:37,440
I want the items to be spaced
out evenly on this line.

37
00:02:37,440 --> 00:02:43,138
Instead of spending time figuring out the
fluid margin or padding values for this,

38
00:02:43,138 --> 00:02:48,275
like you would using other CSS layout
methods like floats and inline-block,

39
00:02:48,275 --> 00:02:53,491
I can let flex box figure out the spacing
for me, so back in my container rule,

40
00:02:53,491 --> 00:02:58,013
I'm going to set the justify-content value 
to space-between.

41
00:03:00,787 --> 00:03:05,510
This displays the flex items
with equal spacing between them.

42
00:03:05,510 --> 00:03:11,778
The first and last items are aligned
to the edges of the flex container.

43
00:03:11,778 --> 00:03:17,220
Then, flex box equally distributes the
space between the remaining flex items,

44
00:03:17,220 --> 00:03:20,350
so that the space in between
them is exactly the same.

45
00:03:20,350 --> 00:03:22,920
So that was pretty easy, wasn't it?

46
00:03:22,920 --> 00:03:28,360
Now if you want equal spacing around
every flex item, including the items

47
00:03:28,360 --> 00:03:34,076
aligned to the edges of the container,
you can use the value space-around.

48
00:03:36,965 --> 00:03:41,020
So now the spacing between the flex
items is evenly distributed.

49
00:03:41,020 --> 00:03:44,470
The difference is that it distributes
the space between the first and

50
00:03:44,470 --> 00:03:47,850
last flex items and the container edges.

51
00:03:47,850 --> 00:03:52,720
And that space is equal to half
the spacing between the other flex items.

52
00:03:52,720 --> 00:03:57,550
Sometimes you might not want the outer
items to touch the visual edges

53
00:03:57,550 --> 00:03:58,920
of the flex container.

54
00:03:58,920 --> 00:04:02,570
So space-around is a useful value
if you've set a background or

55
00:04:02,570 --> 00:04:07,440
border around a container and
you want more space along the edges.

56
00:04:07,440 --> 00:04:13,100
Margins have a significant effect on
flex items, particularly the value auto.

57
00:04:13,100 --> 00:04:18,110
A margin set to auto will absorb any
extra space around a flex item and

58
00:04:18,110 --> 00:04:20,780
push other flex items
into different positions.

59
00:04:20,780 --> 00:04:21,608
Let me show you how.

60
00:04:21,608 --> 00:04:28,840
Back in flexbox.css I'm going to create
a new rule that targets item-1.

61
00:04:28,840 --> 00:04:32,650
So I'm targeting the first flex
item inside the flex container.

62
00:04:34,330 --> 00:04:38,040
Then I'll set its margin-right value to auto.

63
00:04:40,500 --> 00:04:47,260
When I refresh the browser notice how
the first item is flush with the left

64
00:04:47,260 --> 00:04:51,440
edge of the container, while the other
flex items are placed on the right side.

65
00:04:52,490 --> 00:04:58,060
Since .item-1's right margin is set
to auto, the browser automatically

66
00:04:58,060 --> 00:05:04,460
inserts an extra space between the first
flex item and the remaining items.

67
00:05:04,460 --> 00:05:09,060
This is a really cool feature of flex
box and makes it easy to left justify

68
00:05:09,060 --> 00:05:13,090
one flex item while right
justifying the other flex items.

69
00:05:13,090 --> 00:05:16,230
Now this would even work
with several flex items.

70
00:05:16,230 --> 00:05:22,060
For example you can have two flex items
to the left and four to the right.

71
00:05:22,060 --> 00:05:26,740
Adding margin-right: auto; to
the second item will insert

72
00:05:26,740 --> 00:05:31,730
the extra space between the second
flex item and the remaining items.

73
00:05:31,730 --> 00:05:34,950
So the justified content
property comes in handy

74
00:05:34,950 --> 00:05:38,930
when styling a navigation that you
want to take up an entire line.

75
00:05:38,930 --> 00:05:43,400
With the links evenly distributed
you can have the site logo flush

76
00:05:43,400 --> 00:05:46,200
with the left margin of the container, and

77
00:05:46,200 --> 00:05:51,080
the navigation menu perfectly placed on
the right side, you'll learn more about

78
00:05:51,080 --> 00:05:55,720
creating responsive navigations with flex
box in the next section of this course.