1
00:00:00,300 --> 00:00:05,090
With Flexbox, you can create flexible,
multicolumn layouts without using floats

2
00:00:05,090 --> 00:00:08,020
or the display properties
inline block value.

3
00:00:08,020 --> 00:00:13,300
So in our layout when the view port or
device is 769 pixels or

4
00:00:13,300 --> 00:00:18,580
wider, I want the two columns to
appear side by side, like this.

5
00:00:18,580 --> 00:00:21,310
And if the viewport is 1020 pixels or

6
00:00:21,310 --> 00:00:24,960
wider, I want the primary
content column on the left

7
00:00:24,960 --> 00:00:29,006
to take up twice as much space as
the secondary content column on the right.

8
00:00:29,006 --> 00:00:33,970
In the index.html file,
both the primary and

9
00:00:33,970 --> 00:00:38,870
secondary content columns are inside
a div with the class row.

10
00:00:38,870 --> 00:00:42,788
So first I'll make row the flex
container for the two columns.

11
00:00:42,788 --> 00:00:48,493
Back in flexbox.css, inside the first
media query, I'll group the class

12
00:00:48,493 --> 00:00:54,120
row with the main-header and
the main-nav selectors to display it flex.

13
00:00:55,550 --> 00:00:59,420
When I preview the workspace in
the browser, both the primary and

14
00:00:59,420 --> 00:01:02,820
secondary columns are now flex items, so

15
00:01:02,820 --> 00:01:08,390
they display on the same line once
the viewport is 769 pixels or wider.

16
00:01:09,970 --> 00:01:14,050
Now the primary content column is
wider than the secondary column,

17
00:01:14,050 --> 00:01:16,190
because it contains more content.

18
00:01:16,190 --> 00:01:19,370
And the secondary column
looks a little too narrow,

19
00:01:19,370 --> 00:01:21,380
depending on the viewport width.

20
00:01:21,380 --> 00:01:25,220
So at this breakpoint,
I want equal width columns.

21
00:01:25,220 --> 00:01:29,930
You can assign an equal amount of space
to flex items with the flex grow and

22
00:01:29,930 --> 00:01:31,300
flex properties.

23
00:01:31,300 --> 00:01:35,260
So back inside the first
media query in flexbox.css,

24
00:01:35,260 --> 00:01:38,460
I'm going to create a new rule
that targets the class col.

25
00:01:40,560 --> 00:01:45,480
Then I'm going to add a flex property and
set the value to 1.

26
00:01:45,480 --> 00:01:50,190
So now each column takes up an equal
amount of space inside the row.

27
00:01:50,190 --> 00:01:51,960
They each take up half the space.

28
00:01:54,520 --> 00:01:57,630
At the widest break point,
I want the primary

29
00:01:57,630 --> 00:02:02,150
content column here to get twice as
much space as the secondary column.

30
00:02:02,150 --> 00:02:08,340
So back inside flexbox.css, I'll scroll
down to the second media query and

31
00:02:08,340 --> 00:02:15,770
I'm going to select the class primary and
give it a flex value of two.

32
00:02:18,190 --> 00:02:22,400
So now for every bit of space
the secondary column gets,

33
00:02:22,400 --> 00:02:26,860
the primary column will always
get twice as much of that space.

34
00:02:26,860 --> 00:02:27,840
So that's it.

35
00:02:27,840 --> 00:02:29,970
Our two-column layout is complete.

36
00:02:31,530 --> 00:02:34,590
Coming up in the next video,
we'll add a third column to the row and

37
00:02:34,590 --> 00:02:36,135
adjust the layout with Flexbox.