CSS Flexbox Layout Complete Guide

Flexbox Core Concepts

Flexbox is a powerful CSS3 layout model that enables efficient arrangement of items in a container. It consists of a main axis and a cross axis. The main axis is the direction in which items are laid out (default: horizontal), while the cross axis is perpendicular to it.

Flexbox excels at one-dimensional layouts, automatically handling space distribution and alignment. It's ideal for responsive design as it adapts to different container sizes.

Container Properties

.container {
  display: flex;
  flex-direction: row;        /* row, column, row-reverse, column-reverse */
  justify-content: center;    /* flex-start, center, flex-end, space-between, space-around */
  align-items: center;        /* stretch, flex-start, center, flex-end, baseline */
  flex-wrap: wrap;            /* nowrap, wrap, wrap-reverse */
  gap: 10px;
}

Item Properties

.item {
  flex-grow: 1;      /* 0 (default) = don't grow, 1 = fill available space */
  flex-shrink: 0;    /* 1 (default) = can shrink, 0 = don't shrink */
  flex-basis: auto;  /* Initial size before grow/shrink */
  align-self: center;/* Override container's align-items */
  order: 0;          /* Lower values appear first */
}

Common Layout Patterns

• Centering: justify-content: center + align-items: center
• Space Between: justify-content: space-between for navbars
• Equal Width: All items with flex: 1
• Fixed + Flex: Sidebar fixed, main content flex: 1

Recommended Tools

Flexbox Froggy is an interactive learning game. CSS-Tricks' Complete Guide to Flexbox is the most comprehensive reference.