Flexbox

Flexbox layouts your content into columns OR rows. If there's not enough space, there's an option to 'wrap'. This makes the container act as a simple grid. Children determine their own sizes.

Guides and Reference

• CSS-Tricks Guide: Left column explains flex parent properties. The right column explains flex child properties.

• Web.dev Guide

• MDN Guide

• MDN Reference

• Game: Flexbox Froggy

Utilities

• Make the last children in a wrapping container evenly fill any remaining space