When should I use Flexbox vs Grid?

Flexbox is best for one-dimensional layouts (rows OR columns). Grid is for two-dimensional layouts (rows AND columns). Many layouts use both.

What does flex-wrap do?

By default, flex items stay on one line and shrink. flex-wrap: wrap allows items to flow to the next line when they don't fit.

justify-content aligns items along the main axis (horizontal in row, vertical in column). align-items aligns along the cross axis (perpendicular).

Developer Tool

Learn and experiment with CSS Flexbox visually. Adjust container properties, see items respond in real time, and copy the generated CSS.

100% free — no account needed

Layout Presets

flex-direction

justify-content

align-items

flex-wrap

gap: 12px

Items: 4

Item 1

grow:

shrink:

order:

Item 2

grow:

shrink:

order:

Item 3

grow:

shrink:

order:

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Experiment with flex properties interactively

Direction, justify-content, align-items, wrap, and gap — all adjustable.

See colored flex items respond to your changes in real time.

Centered, navbar, sidebar, grid-like, and footer layouts.

Generated CSS for the container ready to use in your project.

Developer Tools

CSS gradient, box shadow, Tailwind converter, and more.