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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing Flexbox

2:42 with Guil Hernandez

Flexbox is a remarkable layout feature that's redefined how web designers build responsive layouts. With flexbox you can change the direction, size, and order of elements, like navigation links, content columns and images, regardless of their original size and order in the HTML. By the end of this course, you'll be able to build complex layouts in less time using flexbox.

Resources

Video review

  • CSS layout methods like floats, inline-block and absolute positioning have limitations and were not designed to handle the layout demands of today’s complex responsive websites.
  • With flexbox you get the benefits of floats, block and inline-block, like stacking elements and laying them out side-by-side, without any of the strange browser behaviors that come with using them.
  • For example, You can evenly distribute the space inside a container so that the columns are of equal width.
  • You can grow the width of one column while automatically shrinking the width of the two columns beside it.
  • You can easily rearrange column order and display columns vertically on smaller screen sizes, without ever changing the markup.

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

    [SOUND] Hey everyone, I'm Guil. 0:00
    Thanks for joining me here in CSS Flexbox Layout where you'll learn one of the most 0:06
    advanced methods for laying out webpages. 0:10
    CSS lab methods like floats, 0:13
    in line block and absolute positioning have certain limitations and were not 0:15
    designed to handle the layout demands of today's complex responsive websites. 0:19
    Floats, for example, weren't even intended for 0:24
    page layout, they were really meant for wrapping text around images. 0:26
    As you learned in CSS Layout Basics, 0:31
    floats can be problematic because of their quirky behavior. 0:33
    They require clear fixes to prevent containing elements from collapsing. 0:36
    And with inline block display you're always fighting with 0:40
    the default white space created by the browser. 0:43
    And positioning can be tricky in page layout because it requires positioning 0:46
    context and 0:49
    other content on the page behaves as if the positioned elements didn't even exist. 0:51
    So, Flexbox, or Flexible Box Layout 0:56
    is a set of CSS properties that proved a flexible way to layout page content. 0:59
    It's a remarkable layout feature that's redefined how web designers build layouts. 1:04
    You get the benefits of floats, 1:09
    block, and inline block like stacking elements and laying them out side by side 1:11
    without any of the strange browser behaviors that come with using them. 1:16
    With Flexbox you can change the direction, size and order or 1:20
    elements, like navigation links, content columns and 1:24
    images, regardless of their original size and order in the HTML. 1:27
    And it gives you simple yet intelligent tools for placing your content anywhere 1:31
    from top to bottom, left to right, center, and middle of a container. 1:36
    No matter where they appear in the source code. 1:40
    You could even stretch and shrink elements and distribute space. 1:42
    [NOISE] For instance, you can create three equal height columns, 1:46
    regardless of which column is the tallest. 1:49
    Then, lay them out on the same line by aligning the first column to the left edge 1:52
    of its container. 1:56
    And the last column to the right edge, 1:57
    while the second column sits perfectly between the two. 1:59
    You can evenly distribute the space inside the container so 2:02
    that the columns are of equal width. 2:06
    Or you can grow the width of one column, 2:08
    while automatically shrinking the width of the two columns beside it. 2:10
    And you can easily rearrange the column order and 2:14
    display them vertically on small screen sizes without ever changing the markup. 2:16
    So all this with just a few lines of CSS. 2:21
    This makes building responsive layouts that scale from small 2:25
    mobile devices to large desktop screens easier than ever. 2:28
    So I'm excited to introduce you to the powers of Flexbox. 2:32
    By the end of this course you'll be able to build complex layouts in less time 2:35
    using Flexbox. 2:39

    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