HTML & CSS · Quick Reference

Lesson 7 — Flexbox Cheat Sheet

HTML & CSS

In one line: Flexbox (Flexible Box Layout) is the CSS superpower that makes alignment and distribution of elements finally predictable. Before Flexbox, centering a div was famously painful. ...

Key Ideas

1What is Flexbox?. Flexbox is a one-dimensional layout system. "One-dimensional" means it arranges items along a single axis — either a row (horizontal) or a column (vertical). Compare t...

2Main Axis & Cross Axis. Flexbox revolves around two axes. The main axis is the primary direction items flow (set by flex-direction). The cross axis runs perpendicular to it.

3Container Properties. These properties go on the parent container. They control how children are arranged, spaced, and aligned.

4Child (Item) Properties. These properties go on individual flex items (the children), giving you per-item control over sizing, order, and alignment.

5Real-World Flex Patterns. Flexbox shines for common UI patterns. Here are the four most important ones you'll use constantly:

Code Examples

.container {
  display: flex; /* That's it! Children are now flex items */
}

/* The children automatically arrange in a row (default) */
.container div {
  background: steelblue;
  padding: 1rem;
  color: white;
}

.nav {
  display: flex;
  justify-content: space-between; /* logo left, links right */
  align-items: center;       /* vertical center */
  padding: 1rem 2rem;
}

.hero {
  display: flex;
  justify-content: center;  /* center horizontally */
  ali...

.sidebar { flex: 0 0 260px; }   /* fixed 260px, won't grow or shrink */
.main-content { flex: 1; }       /* takes all remaining space */

/* Two equal columns */
.col { flex: 1; }               /* both grow equally */

/* Three columns: 1:2:1 ratio */...