Lesson 4 of 9

Flexbox

Flexbox lays items out in a single row or column and makes alignment and spacing straightforward. You'll use it for navbars, rows of cards, and centering content.

Flexbox is a one-dimensional layout system — it lays items out in either a row or a column. Apply display: flex to a container, and its children become "flex items" you can align, distribute, and resize with precision.

/* Flexbox container properties */
.flex-container {
  display: flex;

  /* Direction */
  flex-direction: row;            /* left to right (default) */
  flex-direction: row-reverse;    /* right to left */
  flex-direction: column;         /* top to bottom */
  flex-direction: column-reverse;

  /* Wrapping */
  flex-wrap: nowrap;  /* all on one line (default) */
  flex-wrap: wrap;    /* wrap to next line if needed */

  /* Shorthand */
  flex-flow: row wrap;

  /* Alignment on main axis (row = horizontal, column = vertical) */
  justify-content: flex-start;     /* pack at start */
  justify-content: flex-end;       /* pack at end */
  justify-content: center;         /* center */
  justify-content: space-between;  /* even gaps, no outer gaps */
  justify-content: space-around;   /* even gaps with outer gaps */
  justify-content: space-evenly;   /* all gaps equal */

  /* Alignment on cross axis */
  align-items: stretch;     /* fill container height (default) */
  align-items: flex-start;  /* align to top */
  align-items: flex-end;    /* align to bottom */
  align-items: center;      /* center vertically */

  /* Gap between items */
  gap: 16px;           /* row and column gap */
  gap: 8px 16px;       /* row-gap column-gap */
}

/* Flex item properties */
.flex-item {
  flex-grow: 1;    /* how much to grow to fill space (0 = don't grow) */
  flex-shrink: 1;  /* how much to shrink (0 = don't shrink) */
  flex-basis: 200px; /* initial size before growing/shrinking */
  flex: 1;         /* shorthand: grow=1 shrink=1 basis=0 */

  align-self: center; /* override align-items for this item */
  order: 2;           /* control order (default 0) */
}
CSS on a sample page
/* Common Flexbox patterns */

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

/* Card grid that wraps */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px;  /* grow=1, shrink=1, basis=300px */
}

/* THE classic center-everything */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* full viewport height */
}

/* Sidebar layout */
.layout {
  display: flex;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;  /* don't shrink the sidebar */
}

.main-content {
  flex: 1;  /* take all remaining space */
  min-width: 0;  /* prevent overflow in flex children */
}
CSS on a sample page

Common question

Has flexbox replaced grid?

Flexbox shares out space along one axis: it decides how items grow, shrink, align and space themselves in a row or a column. Grid divides an area into rows and columns and places items into the resulting cells, including across several of them. Most use both: grid for the page layout, flex for the components inside it.

Keep the axes straight: justify-* works along the main axis, align-* across it, and flex-direction decides which is which. Use gap instead of margins for space between items, and let flex-grow and flex-basis say what you mean instead of fixed pixel widths.

Source: The CSS specifications describe Flexible Box Layout as laying out items "in a single dimension" and Grid Layout as "a two-dimensional layout system".

Common mix-ups

Each of these sounds reasonable. Think about why it is wrong, then open the explanation.

  • Flexbox can lay out anything, so grid is redundant.

  • justify-content centres items vertically in a row.

  • Floats are still needed for layout if older browsers have to be supported.

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.