1
00:00:00,250 --> 00:00:04,250
In the previous video you learned how
Flexbox makes column layout simple.

2
00:00:04,250 --> 00:00:06,760
So let’s try another
approach to our webpage

3
00:00:06,760 --> 00:00:09,940
by creating a flexible
three-column design.

4
00:00:09,940 --> 00:00:14,170
To follow along using the new workspace,
launch the workspace on this page.

5
00:00:14,170 --> 00:00:17,240
So I’ve added a third content column

6
00:00:17,240 --> 00:00:22,270
with the class tertiary to
the latest index.html file.

7
00:00:22,270 --> 00:00:26,440
And the primary column now contains
a colorful text graphic and

8
00:00:26,440 --> 00:00:27,430
some text below it.

9
00:00:27,430 --> 00:00:30,960
You can see what it looks like
once you preview that work space.

10
00:00:30,960 --> 00:00:35,580
Now the layout were going to build,
starts off as a one column layout and

11
00:00:35,580 --> 00:00:38,520
small screens,
just like in the previous video.

12
00:00:38,520 --> 00:00:43,210
Then it's an equal width two
column layout in medium screens.

13
00:00:43,210 --> 00:00:46,570
And a three column
layout in large screens.

14
00:00:46,570 --> 00:00:51,800
And notice how the middle column is
slightly wider than the other two columns.

15
00:00:51,800 --> 00:00:53,580
All right, so let's get started.

16
00:00:53,580 --> 00:00:56,740
First, just like we did
in the previous video,

17
00:00:56,740 --> 00:01:01,270
I'm going to make the parent
row div the flex container.

18
00:01:01,270 --> 00:01:05,350
So I'll open up the file flexbox.css.

19
00:01:05,350 --> 00:01:10,084
And inside the first media query,
I'm going to add the class, row,

20
00:01:10,084 --> 00:01:14,670
to the main-header and main-nav selector,
so I can display it flex.

21
00:01:18,108 --> 00:01:21,950
The three columns share the class, col.

22
00:01:21,950 --> 00:01:27,599
So back in the media query,
I am going to create a new rule that

23
00:01:27,599 --> 00:01:32,050
targets col.

24
00:01:32,050 --> 00:01:35,290
Then I'm going to set
their flex value to 1.

25
00:01:35,290 --> 00:01:41,420
So now the columns take up equal
amounts of space inside the row.

26
00:01:41,420 --> 00:01:44,040
Now, at the 769 pixel break point,

27
00:01:44,040 --> 00:01:47,880
I want to display only two
equal-width columns side by side.

28
00:01:47,880 --> 00:01:50,430
While the third column
displays on the next line.

29
00:01:50,430 --> 00:01:55,630
If I place all three columns on the same
line when the screen is 769 pixels wide,

30
00:01:55,630 --> 00:01:58,780
the columns will appear
too narrow on the screen,

31
00:01:58,780 --> 00:02:00,410
making the content difficult to read.

32
00:02:02,940 --> 00:02:06,900
So I can use FlexBox to make these
responsive calculations a lot

33
00:02:06,900 --> 00:02:08,370
less complex.

34
00:02:08,370 --> 00:02:12,640
I'm going to us the flex-basis
property to set the initial size

35
00:02:12,640 --> 00:02:14,030
I want the columns to be.

36
00:02:14,030 --> 00:02:19,400
Back in the col rule,
I'm going to define a flex-basis value

37
00:02:19,400 --> 00:02:23,190
of 50%,
as the second value in the flex property.

38
00:02:25,260 --> 00:02:29,830
And below the col rule,
I'll target row and make it a multi-line

39
00:02:29,830 --> 00:02:34,660
flex container using the flex-wrap 
property and the value wrap.

40
00:02:35,890 --> 00:02:38,540
So now when there isn't
enough room on one line,

41
00:02:38,540 --> 00:02:41,220
a column will shift down
to a second flex line.

42
00:02:43,260 --> 00:02:47,820
So once I refresh the browser,
when the view port is 769 pixels or

43
00:02:47,820 --> 00:02:53,510
wider, the primary and secondary
columns display on the same line.

44
00:02:53,510 --> 00:02:56,450
Each taking up 50 percent of the row

45
00:02:56,450 --> 00:02:59,120
while the tertiary column
displays on the next line.

46
00:03:01,050 --> 00:03:06,150
Now at the widest break point, I don't
want any column breaking onto a new line.

47
00:03:06,150 --> 00:03:09,310
So all three columns should
display on the same line.

48
00:03:09,310 --> 00:03:13,400
So back in my style sheet,
inside the second media query,

49
00:03:13,400 --> 00:03:17,060
I'll set the column's
flex-basis value to zero.

50
00:03:17,060 --> 00:03:18,332
So I'll target col.

51
00:03:20,422 --> 00:03:23,950
And say flex-basis zero.

52
00:03:26,340 --> 00:03:31,510
Giving the columns a flex-basis value
of zero, displays the three columns

53
00:03:31,510 --> 00:03:37,190
on the same line when the view port or
device is 1025 pixels or wider.

54
00:03:37,190 --> 00:03:41,510
So at this breakpoint, the columns
no longer re-distribute the space

55
00:03:41,510 --> 00:03:44,260
inside the row by breaking
on to a new line.

56
00:03:44,260 --> 00:03:48,760
So the primary column holds the most
important information on the page.

57
00:03:48,760 --> 00:03:54,330
So it should make a bigger statement by
taking up more visual space on the page.

58
00:03:54,330 --> 00:03:57,360
So back inside the second media query,

59
00:03:57,360 --> 00:04:02,660
I'll give the primary column
a larger flex-grow value.

60
00:04:02,660 --> 00:04:07,410
So, I'll create a new rule
that targets primary, and

61
00:04:07,410 --> 00:04:11,547
let's set the flex-grow to 1.4.

62
00:04:11,547 --> 00:04:17,640
So now the primary column gets 1.4 the
amount of space as the other two columns.

63
00:04:17,640 --> 00:04:21,980
Finally, I'm going to rearrange
the column order on wider screens.

64
00:04:21,980 --> 00:04:25,340
So the primary column
is the widest column.

65
00:04:25,340 --> 00:04:28,150
So I'm going to create
some balance in the design

66
00:04:28,150 --> 00:04:30,580
by displaying it as the center column.

67
00:04:30,580 --> 00:04:35,294
Now the primary column should still
appear first on small mobile screens.

68
00:04:38,501 --> 00:04:43,719
Back inside flexbox.css,
at the 769px breakpoint,

69
00:04:43,719 --> 00:04:50,754
I'm going to select the .secondary
column and give it an order value of -1.

70
00:04:54,959 --> 00:05:01,986
Since the primary and tertiary columns
have an order of zero by default,

71
00:05:01,986 --> 00:05:06,938
once I give the secondary
column the value of -1,

72
00:05:06,938 --> 00:05:11,850
it places the content
column first in the row.

73
00:05:11,850 --> 00:05:16,510
So now the primary content column
displays as the center column.

74
00:05:16,510 --> 00:05:17,047
Perfect!