Toolcroft

Color Tools

CSS Flexbox Playground

Interactively explore all CSS Flexbox properties. Toggle flex-direction, wrap, justify-content, align-items, and more - then copy the generated CSS.

Preview
1
2
3
4
5
CSS Output
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

The flexbox mental model

A flex container has a main axis and a cross axis. By default the main axis runs left to right (row direction). Items are placed along the main axis; the cross axis is perpendicular. Setting flex-direction: column flips both axes: the main axis now runs top to bottom, and the cross axis runs left to right. Understanding axis direction is the key to predicting how justify and align properties behave.

Core properties reference

PropertyApplies toEffect
flex-directionContainerSets main axis: row, row-reverse, column, column-reverse.
flex-wrapContainerWhether items wrap to a new line (nowrap, wrap, wrap-reverse).
justify-contentContainerAligns items along the main axis (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-itemsContainerAligns items along the cross axis for a single line (stretch, flex-start, flex-end, center, baseline).
align-contentContainerAligns multiple lines along the cross axis when wrapping.
gapContainerSpace between items. Shorthand for row-gap and column-gap.
flex-growItemFactor by which the item grows if extra space is available. flex-grow: 1 on all items distributes space equally.
flex-shrinkItemFactor by which the item shrinks if the container is too small. Default 1.
flex-basisItemStarting size of the item before grow/shrink is applied. auto uses the item’s content size.

Common patterns

  • Perfect centering: display: flex; justify-content: center; align-items: center on the container. This is the simplest way to center anything in CSS.
  • Navigation bar: display: flex; justify-content: space-between puts the logo on the left and nav links on the right automatically.
  • Equal-width columns: give each item flex: 1 (shorthand for grow: 1, shrink: 1, basis: 0) to distribute space equally regardless of content size.

Browser compatibility

Flexbox is fully supported in all modern browsers (Chrome, Firefox, Safari, Edge). The old -webkit- prefix is only required for Safari versions prior to 9 (released 2015) and is no longer necessary for any actively maintained browser. If you are not targeting extremely old iOS devices, no vendor prefixes are needed.

Flexbox vs. Grid

Flexbox and CSS Grid solve related but distinct layout problems:

  • Flexbox is one-dimensional: it arranges items along a single axis (either a row or a column). Use it for navigation bars, button groups, card rows, and any layout where items are arranged in a single direction.
  • CSS Grid is two-dimensional: it places items in both rows and columns simultaneously. Use it for overall page layout, complex dashboard grids, and anything requiring precise placement in two dimensions.

A common pattern is to use Grid for the overall page structure and Flexbox within individual components. The two can be freely nested.