⚡ CYBER NOVEMBER SALE ⚡ 50% off any plan for 6 months, exclusive to new subscribers.

Join the Treehouse affiliate program and earn 25% recurring commission!

Well done!

You have completed CSS Flexbox Layout!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

Creating a Three Column Layout with Flexbox

5:24 with Guil Hernandez

Learn how to create a flexible three-column design with flexbox.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Video review

You can use flexbox to make responsive column calculations less complex.
Use the flex-basis property 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 up

Related 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 up

You need to sign up for Treehouse in order to set up Workspace

Sign up