Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Flexbox Layout

Well done!

You have completed CSS Flexbox Layout!

Sign up for Treehouse Back to Library

Creating a Two Column Layout with Flexbox

2:36 with Guil Hernandez

With flexbox, it's simple to create flexible multi-column layouts without using floats or inline-block display.

Video review

  • You can assign an equal amount of space to columns with the flex-grow and flex properties.

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

    With Flexbox, you can create flexible, multicolumn layouts without using floats 0:00
    or the display property's 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

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

      Sign up