CSS Flexbox Complete Guide

CSS Flexbox Complete Guide

Master CSS Flexbox layout with this comprehensive guide covering all properties and use cases.

What is Flexbox?

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

Container Properties

display: flex

.container {
  display: flex;
}

flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

Item Properties

flex-grow

.item {
  flex-grow: 1;
}

Common Patterns

Center Everything

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}