CSSLayout

CSS Flexbox Visualized

Every Flexbox property explained through live animated demos.

By Forhad12 min readBeginnerInteractive Demo

What is Flexbox?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that lets you distribute space among items in a container and align them — even when their size is unknown or dynamic. It works along a main axis (set by flex-direction) and a cross axis (perpendicular to it).

Core Properties

  • flex-direction — defines the main axis: row, row-reverse, column, column-reverse
  • justify-content — aligns items along the main axis
  • align-items — aligns items along the cross axis
  • flex-wrap — controls whether items wrap onto new lines

Interactive Playground

Toggle the properties below and watch the flex container update in real time.

flex-direction
justify-content
align-items
flex-wrap
Items (4)
1
2
3
4
Generated CSS
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
}