- Building a Navigation Bar with Flexbox 7:32
- Creating a Two Column Layout with Flexbox 2:36
- Creating a Three Column Layout with Flexbox 5:24
- Aligning Items to the Bottom of a Column 4:13
- Creating a Sticky Footer with Flexbox 4:58
- Building a Layout with Flexbox 5 questions
- Flexbox Columns Challenge 2 objectives
Preview
Video Player
00:00
00:00
Creating a Two Column Layout with Flexbox
2:36With flexbox, it's simple to create flexible multi-column layouts without using floats or inline-block display.
With Flexbox, you can create flexible,
multicolumn layouts without using floats
0:00
or the display property's
inline-block value.
0:05
So in our layout when the view port or
device is 769 pixels or
0:08
wider, I want the two columns to
appear side by side, like this.
0:13
And if the viewport is 1020 pixels or
0:18
wider, I want the primary
content column on the left
0:21
to take up twice as much space as
the secondary content column on the right.
0:24
In the index.html file,
both the primary and
0:29
secondary content columns are inside
a div with the class row.
0:33
So first I'll make row the flex
container for the two columns.
0:38
Back in flexbox.css, inside the first
media query, I'll group the class
0:42
row with the main-header and
the main-nav selectors to display it flex.
0:48
When I preview the workspace in
the browser, both the primary and
0:55
secondary columns are now flex items, so
0:59
they display on the same line once
the viewport is 769 pixels or wider.
1:02
Now the primary content column is
wider than the secondary column,
1:09
because it contains more content.
1:14
And the secondary column
looks a little too narrow,
1:16
depending on the viewport width.
1:19
So at this breakpoint,
I want equal width columns.
1:21
You can assign an equal amount of space
to flex items with the flex grow and
1:25
flex properties.
1:29
So back inside the first
media query in flexbox.css,
1:31
I'm going to create a new rule
that targets the class col.
1:35
Then I'm going to add a flex property and
set the value to 1.
1:40
So now each column takes up an equal
amount of space inside the row.
1:45
They each take up half the space.
1:50
At the widest break point,
I want the primary
1:54
content column here to get twice as
much space as the secondary column.
1:57
So back inside flexbox.css, I'll scroll
down to the second media query and
2:02
I'm going to select the class primary and
give it a flex value of two.
2:08
So now for every bit of space
the secondary column gets,
2:18
the primary column will always
get twice as much of that space.
2:22
So that's it.
2:26
Our two-column layout is complete.
2:27
Coming up in the next video,
we'll add a third column to the row and
2:31
adjust the layout with Flexbox.
2:34