Skip to content
O'Reilly home
Learning Path

Mastering CSS Flexbox

Start
Time to complete: 3h 2m
Topics

Published byInfinite Skills and O'Reilly Media, Inc.

CreatedMay 2018

To create attractive, highly functional websites, cascading style sheets (CSS) have long been the standard language for defining elements on a web page. But as powerful as CSS has become over the years, it’s still difficult to use for creating certain types of layouts, and it can be somewhat limiting when it comes to designing for the range of devices your viewers use to visit your web pages. Mozilla’s Flexbox is designed to help make some of your trickier layouts infinitely easier to create and more flexible across a broad spectrum of browsers and display devices.

This learning path, designed for beginner- to intermediate-level web designers and developers, will introduce you to this latest and hottest development in CSS. You’ll learn about Flexbox fundamentals, including the flex model and some basic terminology. You’ll also see how, with just a few lines of code, you can create almost any responsive feature your site requires: widgets, carousels, you name it! Whether you’re a designer who is relatively new to the CSS space, or a seasoned CSS developer, this learning path will guide you through the Flexbox learning curve and set you on a path toward easier web page layout and design.

What you’ll learn—and how you can apply it

  • Foundational concepts of flexible boxes in CSS
  • Solve layout challenges for applications that grow, shrink, or change orientation on different viewports
  • Specify the direction material flows, how content wraps, and ways that components expand to fill a space, without altering the underlying markup
  • Explore CSS properties that apply to the flex container, and those that affect the layout of individual flex items
  • Work with examples for a responsive two-column layout, a power grid home page, sticky footer, and calendar

This learning path is for you because…

  • You’re a designer with introductory or intermediate-level CSS skills who is interested in mastering flexible boxes
  • You’re a developer looking to understand and master Flexbox
  • You’ve heard about Flexbox, and want to understand what it is and how it fits in to responsive design

Prerequisites:

  • You should be comfortable with introductory level CSS content
  • You should be familiar with Responsive Design

Materials or downloads needed in advance: