"Python Basics (2015)" was retired on June 22, 2018. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Flexbox Layout!
You have completed CSS Flexbox Layout!
Preview
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