Creating a Two Column Layout with Flexbox2:36 with Guil Hernandez
With flexbox, it's simple to create flexible multi-column layouts without using floats or inline-block display.
- You can assign an equal amount of space to columns with the
With Flexbox, you can create flexible, multicolumn layouts without using floats 0:00 or the display properties 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
You need to sign up for Treehouse in order to download course files.Sign up