O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2017

Video Description

This tutorial teaches you how to use the new CSS3 Flexbox box model to create responsive web layouts more effectively!

About This Video

  • Simple grids with Flexbox where all columns in a row have the same size

  • More advanced Flexbox grids where columns can have arbitrary sizes

  • Vertical centering to vertically align any element

  • Media objects, the popular OOCSS pattern

  • The Holy Grail Layout, a complete site layout with sidebars and sticky footer

  • In Detail

    After this course, you'll be able to use Flexbox to vertically align any element, create modern gridstake up remaining space, add spacing between elements, implement complete site layouts and much more!Inside the course, I'll answer all questions you may have along the way.To see Flexbox in practice, 3 mini-projects will manifest your skills and enable you to use Flexbox productively in future web design projects. I look forward to seeing you inside. As a bonus, this course includes a complete Flexbox Cheat Sheet that you can use to recap all you've learned and to refer back to while using Flexbox. Additionally, I included the code for a Flexbox demo showcase -- which is like an interactive cheat sheet for you to see in the browser that contains every property and every layout example from this tutorial.