CSS Flexbox Complete Guide

What is Flexbox?

Flexbox is a one-dimensional layout system for arranging items in a row or column. It makes centering, spacing, and responsive layouts simple.

Getting Started

.container {
  display: flex;          /* activate flexbox */
  justify-content: center; /* horizontal alignment */
  align-items: center;     /* vertical alignment */
  gap: 16px;               /* space between items */
}

Main Axis Properties (justify-content)

Value	Effect
flex-start	Pack to start
center	Center items
space-between	Equal space between
space-around	Equal space around

Direction

.container { flex-direction: row; }    /* default, horizontal */
.container { flex-direction: column; } /* vertical */

Flex Items

.item {
  flex: 1;          /* grow to fill space equally */
  flex-grow: 2;     /* this item takes twice the space */
  flex-shrink: 0;   /* never shrink */
}

Perfect Centering

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

FAQs

Flexbox or Grid?

Flexbox for 1D (row OR column); Grid for 2D layouts. More in our CSS section.

How do I wrap items?

Add flex-wrap: wrap; to the container.