Creating a Three Column Layout with Flexbox5:24 with Guil Hernandez
Learn how to create a flexible three column design with flexbox.
- 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.
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 its and 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 grove value. 3:57 So, I'll create a new rule that targets primary, and 4:02 lets 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