Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to create a flexible three-column design with flexbox.
Video review
- You can use flexbox to make responsive column calculations less complex.
- Use the
flex-basisproperty to set the initial size you want the column items to be.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the previous video you learned how
Flexbox makes column layout simple.
0:00
So let’s try another
approach to our webpage
0:04
by creating a flexible
three-column design.
0:06
To follow along using the new workspace,
launch the workspace on this page.
0:09
So I’ve added a third content column
0:14
with the class tertiary to
the latest index.html file.
0:17
And the primary column now contains
a colorful text graphic and
0:22
some text below it.
0:26
You can see what it looks like
once you preview that work space.
0:27
Now the layout were going to build,
starts off as a one column layout and
0:30
small screens,
just like in the previous video.
0:35
Then it's an equal width two
column layout in medium screens.
0:38
And a three column
layout in large screens.
0:43
And notice how the middle column is
slightly wider than the other two columns.
0:46
All right, so let's get started.
0:51
First, just like we did
in the previous video,
0:53
I'm going to make the parent
row div the flex container.
0:56
So I'll open up the file flexbox.css.
1:01
And inside the first media query,
I'm going to add the class, row,
1:05
to the main-header and main-nav selector,
so I can display it flex.
1:10
The three columns share the class, col.
1:18
So back in the media query,
I am going to create a new rule that
1:21
targets col.
1:27
Then I'm going to set
their flex value to 1.
1:32
So now the columns take up equal
amounts of space inside the row.
1:35
Now, at the 769 pixel break point,
1:41
I want to display only two
equal-width columns side by side.
1:44
While the third column
displays on the next line.
1:47
If I place all three columns on the same
line when the screen is 769 pixels wide,
1:50
the columns will appear
too narrow on the screen,
1:55
making the content difficult to read.
1:58
So I can use FlexBox to make these
responsive calculations a lot
2:02
less complex.
2:06
I'm going to us the flex-basis
property to set the initial size
2:08
I want the columns to be.
2:12
Back in the col rule,
I'm going to define a flex-basis value
2:14
of 50%,
as the second value in the flex property.
2:19
And below the col rule,
I'll target row and make it a multi-line
2:25
flex container using the flex-wrap
property and the value wrap.
2:29
So now when there isn't
enough room on one line,
2:35
a column will shift down
to a second flex line.
2:38
So once I refresh the browser,
when the view port is 769 pixels or
2:43
wider, the primary and secondary
columns display on the same line.
2:47
Each taking up 50 percent of the row
2:53
while the tertiary column
displays on the next line.
2:56
Now at the widest break point, I don't
want any column breaking onto a new line.
3:01
So all three columns should
display on the same line.
3:06
So back in my style sheet,
inside the second media query,
3:09
I'll set the column's
flex-basis value to zero.
3:13
So I'll target col.
3:17
And say flex-basis zero.
3:20
Giving the columns a flex-basis value
of zero, displays the three columns
3:26
on the same line when the view port or
device is 1025 pixels or wider.
3:31
So at this breakpoint, the columns
no longer re-distribute the space
3:37
inside the row by breaking
on to a new line.
3:41
So the primary column holds the most
important information on the page.
3:44
So it should make a bigger statement by
taking up more visual space on the page.
3:48
So back inside the second media query,
3:54
I'll give the primary column
a larger flex-grow value.
3:57
So, I'll create a new rule
that targets primary, and
4:02
let's set the flex-grow to 1.4.
4:07
So now the primary column gets 1.4 the
amount of space as the other two columns.
4:11
Finally, I'm going to rearrange
the column order on wider screens.
4:17
So the primary column
is the widest column.
4:21
So I'm going to create
some balance in the design
4:25
by displaying it as the center column.
4:28
Now the primary column should still
appear first on small mobile screens.
4:30
Back inside flexbox.css,
at the 769px breakpoint,
4:38
I'm going to select the .secondary
column and give it an order value of -1.
4:43
Since the primary and tertiary columns
have an order of zero by default,
4:54
once I give the secondary
column the value of -1,
5:01
it places the content
column first in the row.
5:06
So now the primary content column
displays as the center column.
5:11
Perfect!
5:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up