Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Get Started with Flexbox CSS Layouts

via egghead.io

Overview

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container. It can also control how the elements are positioned within a flexed container.
Once you start thinking in rows and columns, you can control almost any flexed layout with just a few simple flexbox layout primitives.

Syllabus

  • Flex into a Row or a Column with flex-direction
  • Change the Spacing of Flexed Components with justify-content
  • Change the off-axis Alignment of a Flexed Container with `align-items`
  • Change the Alignment of a Single Flexed Item with 'align-self'
  • Wrap Elements Inside of a Flexed Container with `flex-wrap`
  • Proportionally Grow a Flexed Element by Setting `flex-grow` or `flex` Styles

Taught by

Chris Achard

Reviews

4.4 rating at egghead.io based on 16 ratings

Start your review of Get Started with Flexbox CSS Layouts

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.