1
00:00:00,000 --> 00:00:04,483
[MUSIC]

2
00:00:04,483 --> 00:00:09,120
By now you know that Flexbox gives you a
quicker and easier way to lay out content.

3
00:00:09,120 --> 00:00:13,305
Its direction, order, space distribution,
and automatic sizing features make

4
00:00:13,305 --> 00:00:17,025
it an intelligent solution for
building responsive layouts.

5
00:00:17,025 --> 00:00:20,555
So now it's time to put those new
Flexbox skills into practice.

6
00:00:20,555 --> 00:00:23,665
Coming up in this section, you're going
to use Flexbox to build the layout

7
00:00:23,665 --> 00:00:26,495
a simple web page called Best City Guide.

8
00:00:26,495 --> 00:00:28,525
This web page should look familiar.

9
00:00:28,525 --> 00:00:32,320
It's the layout you built
in the CSS basics course.

10
00:00:32,320 --> 00:00:36,470
I'll teach you some of the real world
problems Flexbox can easily solve

11
00:00:36,470 --> 00:00:38,500
when building a responsive layout.

12
00:00:38,500 --> 00:00:43,350
For example, switching the direction of a
navigation from vertical on small screens,

13
00:00:43,350 --> 00:00:45,570
to horizontal on large screens.

14
00:00:45,570 --> 00:00:49,610
Also, displaying flexible content
columns with equal heights or

15
00:00:49,610 --> 00:00:53,980
rearranging content order based on screen
size, and the easiest solution for

16
00:00:53,980 --> 00:00:55,700
displaying a sticky footer.

17
00:00:55,700 --> 00:00:58,850
So first up,
let's begin building the navigation.

18
00:00:58,850 --> 00:01:01,390
To follow along using
the latest workspace,

19
00:01:01,390 --> 00:01:04,760
launch the workspace on this page or
you can download the project files.

20
00:01:06,360 --> 00:01:09,670
Flexbox's source order independence
makes it the perfect tool for

21
00:01:09,670 --> 00:01:12,590
building a responsive website navigation.

22
00:01:12,590 --> 00:01:14,350
You can layout the site logo and

23
00:01:14,350 --> 00:01:19,370
navigation in one column on narrow
viewport sizes and mobile devices.

24
00:01:19,370 --> 00:01:21,610
Then in wider viewports and devices,

25
00:01:21,610 --> 00:01:25,840
the navigation can scale up
to a wider horizontal layout.

26
00:01:25,840 --> 00:01:29,370
And in the widest view port range
you can position the navigation and

27
00:01:29,370 --> 00:01:31,510
site logo on the same line.

28
00:01:31,510 --> 00:01:35,440
So the logo can be aligned to
the left side of the page,

29
00:01:35,440 --> 00:01:38,490
while the navigation links
are aligned to the right side.

30
00:01:38,490 --> 00:01:40,605
All this with just a few lines of CSS.

31
00:01:40,605 --> 00:01:45,391
In the index.html file,
the navigation inside

32
00:01:45,391 --> 00:01:50,010
main-header consists of an h1 element.

33
00:01:50,010 --> 00:01:54,750
With the class name containing
the Best City Guide name.

34
00:01:54,750 --> 00:01:59,075
And the navigation menu is an unordered
list with the class main-nav.

35
00:02:00,380 --> 00:02:05,680
The base styles for
this webpage are in the file base.css.

36
00:02:05,680 --> 00:02:09,180
This CSS applies to all
browsers from phones and

37
00:02:09,180 --> 00:02:14,170
tablets to desktop computers, and at the
bottom of the style sheet there are two

38
00:02:14,170 --> 00:02:19,050
media queries that center the layout
containers like main-header and row.

39
00:02:19,050 --> 00:02:22,140
And sets their fluid width in
wider screens and devices.

40
00:02:22,140 --> 00:02:25,650
You can see all the base styles once you
preview the workspace in the browser.

41
00:02:27,510 --> 00:02:32,060
So for these lessons only,
I've split up the CSS file so we can focus

42
00:02:32,060 --> 00:02:36,390
only on the Flexbox layout styles and not
be distracted by all these base styles.

43
00:02:36,390 --> 00:02:41,570
So we're going to write the Flexbox
styles inside the file flexbox.css.

44
00:02:41,570 --> 00:02:46,070
Now, normally on your projects you'd
write the Flexbox layout styles

45
00:02:46,070 --> 00:02:50,040
in the same CSS file, but again writing
them in a separate file will make

46
00:02:50,040 --> 00:02:53,290
everything in these lessons
easier to explain, and

47
00:02:53,290 --> 00:02:57,310
just like in previous CSS layout courses,
we're going to use a mobile

48
00:02:57,310 --> 00:03:02,340
first approach to build this flex box
layout starting with the navigation.

49
00:03:02,340 --> 00:03:08,080
So we'll use the basic layout styles
to style the web page for small,

50
00:03:08,080 --> 00:03:13,606
mobile devices first, then using the two
media queries inside flexbox.css,

51
00:03:13,606 --> 00:03:18,520
we'll adjust the layout for wider screens
and devices using flex box properties.

52
00:03:19,630 --> 00:03:25,590
So first, when the view port or
device is 769 pixels or wider,

53
00:03:25,590 --> 00:03:31,260
I wanna use Flexbox to change the vertical
layout of the navigation to a horizontal

54
00:03:31,260 --> 00:03:36,460
layout, so that it fills the horizontal
space of wider screens and devices.

55
00:03:36,460 --> 00:03:39,970
So by now you know that the first
step in creating a Flexbox layout is

56
00:03:39,970 --> 00:03:41,790
defining the flex container.

57
00:03:41,790 --> 00:03:49,920
So inside the first media query, I'll
select main-header and display it flex.

58
00:03:52,100 --> 00:03:53,480
So I'll type display: flex.

59
00:03:56,830 --> 00:04:03,530
So now the name and main-nav elements
inside main-header are flex items.

60
00:04:05,640 --> 00:04:10,670
So now when the view port is 769 pixels or
wider, the site name and

61
00:04:10,670 --> 00:04:13,150
navigation are on the same line.

62
00:04:13,150 --> 00:04:17,410
But the main-nav list items
are still vertically stacked.

63
00:04:18,680 --> 00:04:20,560
To display them side by side,

64
00:04:20,560 --> 00:04:25,630
I need to define a new flex formatting
context for the list items.

65
00:04:25,630 --> 00:04:30,450
In other words, I need to make their
parent main-nav a flex container.

66
00:04:30,450 --> 00:04:33,950
It's possible for
flex items to be flex containers, too.

67
00:04:33,950 --> 00:04:39,627
So, I'll make main-nav a flex container
by grouping it with main-header.

68
00:04:43,681 --> 00:04:48,441
So this means that main-nav can
accept flex container properties,

69
00:04:48,441 --> 00:04:52,880
and the list items inside
main-nav are now flex items.

70
00:04:52,880 --> 00:04:57,410
Back in the browser, once I refresh,
the direction of the navigation switches

71
00:04:57,410 --> 00:05:00,620
from vertical to horizontal
on wider screens.

72
00:05:00,620 --> 00:05:04,890
So the site name and navigation items
are now laid out on the same line.

73
00:05:04,890 --> 00:05:08,830
So next, at the 769 pixel break point,

74
00:05:08,830 --> 00:05:12,610
I'm going to display the site name and
navigation on separate lines, so

75
00:05:12,610 --> 00:05:17,750
that the header doesn't appear too
cramped on narrow screen sizes.

76
00:05:17,750 --> 00:05:20,950
I could adjust the layout using
the flex-direction property.

77
00:05:22,620 --> 00:05:23,870
So back in the media query,

78
00:05:23,870 --> 00:05:27,874
I'm going to create a new rule
that targets main-header,

79
00:05:27,874 --> 00:05:32,972
then I'll add the flex-direction
property and set the value to column.

80
00:05:32,972 --> 00:05:36,880
Then I'll center align
the navigation by setting main

81
00:05:36,880 --> 00:05:39,830
header's align-items value to center.

82
00:05:42,360 --> 00:05:46,580
So now the site name and
navigation display in a column direction

83
00:05:46,580 --> 00:05:50,580
on separate lines, while main-nav
direction remains horizontal.

84
00:05:50,580 --> 00:05:53,280
Next, when the view port
starts to get wider,

85
00:05:53,280 --> 00:05:57,770
I want to take advantage of the extra
horizontal space that opens up and

86
00:05:57,770 --> 00:06:01,510
position both the name and
navigation on the same line.

87
00:06:02,620 --> 00:06:07,690
The second media query in our style sheet
targets view port widths in devices that

88
00:06:07,690 --> 00:06:10,280
are 1025 pixels and wider.

89
00:06:10,280 --> 00:06:15,837
Inside this media query,
I will select main-header and

90
00:06:15,837 --> 00:06:19,085
set its flex-direction to row.

91
00:06:24,248 --> 00:06:27,819
Now when the view port is 1025 pixels or
wider,

92
00:06:27,819 --> 00:06:31,900
both the site name and
navigation appear on the same line.

93
00:06:34,158 --> 00:06:36,827
Finally, at this width,
I wanna position the site name on

94
00:06:36,827 --> 00:06:40,460
the left side of the header, and
the navigation menu on the right.

95
00:06:40,460 --> 00:06:45,000
Now the easiest way to do this is
with the justify-content property.

96
00:06:45,000 --> 00:06:46,380
Back inside the second media query,

97
00:06:46,380 --> 00:06:51,910
I'm going to add the justify-content
property to the main-header rule,

98
00:06:51,910 --> 00:06:57,010
and set the value to space-between.

99
00:06:57,010 --> 00:07:02,020
Now the value space-between
will align the name

100
00:07:02,020 --> 00:07:05,180
flex item to the left edge
of the container, and

101
00:07:05,180 --> 00:07:10,890
the main-nav item to the right edge,
and at any extra space between them.

102
00:07:10,890 --> 00:07:16,053
So back in the browser, the site name
is now flush with the left margin

103
00:07:16,053 --> 00:07:21,232
of the page and the navigation menu
is perfectly placed on the right.

104
00:07:21,232 --> 00:07:21,851
Nice.

105
00:07:26,397 --> 00:07:31,197
So coming up in the next video, we'll
lay out the two columns using Flexbox.