CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space along a main axis and aligns items along a cross axis. It is ideal for navigation bars, card rows, form layouts, and any UI that needs items to flex and fill available space.

What is the difference between justify-content and align-items?

justify-content distributes flex items along the main axis (horizontal for row, vertical for column). align-items positions items on the cross axis (perpendicular to the main axis). Together they control both dimensions of item placement within the flex container.

What does flex-grow do?

flex-grow defines how much an item should grow relative to sibling items when there is extra space in the container. A flex-grow of 1 means the item takes an equal share of remaining space. A flex-grow of 2 means it takes twice as much as a sibling with flex-grow of 1.

When should I use align-self vs align-items?

align-items is set on the container and applies to all children. align-self is set on individual items to override the container's align-items for just that item. Use align-self when one item needs different cross-axis alignment than the rest.

What is the difference between flex-wrap and flex-shrink?

flex-wrap controls whether items move to new lines when they overflow the container. flex-shrink controls how much an item shrinks relative to siblings when space is tight within a single line. With flex-wrap: wrap, items wrap to a new row instead of shrinking. With flex-wrap: nowrap, flex-shrink determines who gets smaller.

What does the order property do in flexbox?

The order property changes the visual order of flex items without changing the DOM order. Items with lower order values appear first. The default is 0. This is useful for responsive layouts where you need to reorder elements for mobile vs desktop.

Free · Browser-only · No sign-up

CSS Flexbox Playground

Build and learn CSS flexbox layouts visually. Toggle every container and item property and see the result instantly. Copy production-ready CSS output in one click.

flex-directionjustify-contentalign-itemsflex-growflex-wrap100% offline

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

8px

live preview

css output

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

Features

All container props

direction, wrap, justify-content, align-items, align-content, and gap

Per-item controls

flex-grow, flex-shrink, flex-basis, align-self, order, width, height

Dynamic items

Add up to 10 items or remove any selected item

Click to select

Click any item in the preview to jump to its controls

Live preview

See every change reflected instantly in the colored item grid

CSS output

Ready-to-paste CSS for the container and the selected item

How to use

1
Open Container tab
Set flex-direction, justify-content, align-items, flex-wrap, and gap for the container.
2
Open Items tab
Select an individual item to edit its flex-grow, flex-shrink, width, height, align-self, and order.
3
Add or remove items
Click "+ add" to insert items or "remove" to delete the selected one.
4
Copy CSS
Click "Copy all" to grab the container and item CSS, ready to paste into your project.

Frequently asked questions

Can I use this to learn flexbox?

Yes. Toggle each property and watch how it affects the layout in real time. The live preview makes it easy to build intuition for justify-content, align-items, and flex-grow without writing any code.

Does the CSS output include all items or just the selected one?

The output includes the full container CSS plus the selected item's CSS (if it has non-default flex properties). To see all items, select each one individually and copy its CSS separately.

What is flex-basis?

flex-basis sets the initial main-axis size of a flex item before grow/shrink are applied. "auto" means the item uses its width or height. Setting an explicit value like "200px" gives the item a fixed starting size that flex-grow and flex-shrink then adjust.

How is align-content different from align-items?

align-content aligns lines of items on the cross axis when flex-wrap creates multiple rows or columns. align-items aligns individual items within their row. align-content has no effect when flex-wrap is nowrap.

Related tools

CSS Grid Generator

Build and preview CSS grid layouts

CSS Shadow Generator

Generate box-shadow and text-shadow code visually

Tailwind Class Generator

Build Tailwind CSS class strings visually