Flexbox

Line things up in a row or a column with flexbox: align and space them, share the leftover space, and let items wrap onto new lines. Nav bars, toolbars, card rows and "center this" all come from here.

Updated

Flexbox Basics

  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.

Flexible Sizes and Wrapping

  1. Flexbox Sizing: flex-grow, flex-shrink and flex-basis (Journeyman): Each flex item starts from its flex-basis, flex-grow shares out the leftover space like splitting a bill, flex-shrink decides who gives up room when it's tight, flex: 1 sets all three at once, and min-width: 0 lets a long line of text shrink.
  2. Flexbox Wrapping and gap (Journeyman): flex-wrap lets flex items move onto a new line when they run out of room, gap puts even space between them, align-content places the lines, flex: 1 1 15rem makes a card row that fits any screen, and order changes what the eye sees but not what the keyboard follows.

Exercise: The Festival Lineup

  1. Exercise: The Festival Lineup (Journeyman): Lay out the Summer Sound festival's home page with flexbox, a nav bar with the logo left and the links right, a welcome message centered both ways and a row of headliner cards that wraps to fit any screen, and let the tests check every part.