Flexbox Basics

Flexbox Basics: Flexbox: Lining Things Up in a Row or a Column, Flexbox Alignment: justify-content and align-items.

Updated

  1. Flexbox: Lining Things Up in a Row or a Column (Apprentice): One line of CSS, display: flex, lines up an element's children in a row, flex-direction turns the row into a column, and the main and cross axes name the two directions every other flexbox property works along.
  2. Flexbox Alignment: justify-content and align-items (Apprentice): justify-content spaces flex items along the main axis, align-items and align-self line them up across it, the two together center anything both ways, and an auto margin pushes one item to the far end.