CSS Flexbox Layout Builder

Configure flex container and item properties visually, see the live preview, and copy the CSS in one click.

Container

flex-direction
flex-wrap
justify-content
align-items
align-content
gap 8px
Preview height 200px

Items

Item 1 grow:0 shrink:1
Item 2 grow:0 shrink:1
Item 3 grow:0 shrink:1

Active Item — Item 1

flex-grow 0
flex-shrink 1
flex-basis
align-self
order 0

Preview

Item 1
Item 2
Item 3

Click any item in the preview to select it.

Container CSS

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

Item CSS — Item 1

.item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

About the CSS Flexbox Layout Builder

The CSS Flexbox Layout Builder is an interactive visual tool for designing display: flex layouts without writing CSS by hand. Configure every container property — flex-direction, flex-wrap, justify-content, align-items, align-content, and gap — and see the result update instantly in the live preview.

Each flex item is individually configurable: set flex-grow, flex-shrink, flex-basis, align-self, and order per item. Add up to ten items to model complex real-world layouts. The ready-to-use CSS is generated for both the container and each item — copy it with one click.

How to Build a Flexbox Layout

  1. Choose a flex-direction to set the main axis — row (horizontal) or column (vertical).
  2. Set flex-wrap to control whether items wrap onto new lines when the container is too narrow.
  3. Use justify-content to distribute items along the main axis — start, end, center, or spaced.
  4. Use align-items to align items perpendicular to the main axis (the cross axis).
  5. Use align-content to align wrapped lines when there are multiple rows or columns.
  6. Drag the gap slider to add uniform spacing between items.
  7. Click Add to insert a new flex item, or click any item in the preview or list to select it.
  8. Adjust flex-grow to let an item expand to fill available space (0 = no grow).
  9. Adjust flex-shrink to control how much an item shrinks when space is limited (0 = no shrink).
  10. Set flex-basis to define the item's starting size before flex growth or shrinkage is applied.
  11. Use align-self to override the container's align-items for a specific item.
  12. Change order to rearrange items visually without touching the HTML source order.
  13. Click Copy on the Container CSS or Item CSS panel to copy the generated code.

Common Flexbox Layout Use Cases

  • Navigation bars — Use justify-content: space-between to push a logo left and nav links right in a single row.
  • Card grids — Combine flex-wrap: wrap with a fixed flex-basis on each card to create a responsive wrapping grid.
  • Centering content — Set both justify-content: center and align-items: center to perfectly center a child element horizontally and vertically.
  • Sidebar layouts — Give the main content area flex-grow: 1 so it fills remaining width, while the sidebar keeps a fixed flex-basis.
  • Equal-height columns — The default align-items: stretch makes all children the same height as the tallest sibling — no extra CSS needed.
  • Reordering for mobile — Use order inside a media query to restack items for smaller screens without changing the HTML.
  • Footer pinning — Set the page wrapper to flex-direction: column; min-height: 100vh and the footer to margin-top: auto to always push it to the bottom.

Frequently Asked Questions

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

justify-content controls spacing along the main axis (horizontal in a row, vertical in a column). align-items controls alignment along the cross axis (perpendicular to the main axis). When flex-direction: row, justify-content aligns left–right and align-items aligns top–bottom.

What does flex-grow: 1 do?

A flex-grow value of 1 tells the item to expand and fill any remaining free space in the container. If multiple items all have flex-grow: 1, the extra space is divided equally among them. A value of 2 means the item takes twice as much extra space as a sibling with a value of 1.

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

align-items applies to items within a single line. align-content only takes effect when there are multiple wrapped lines (i.e., flex-wrap: wrap is set and items have actually wrapped). It controls how those lines are spaced relative to each other in the cross axis.

What is flex-basis and how is it different from width?

flex-basis sets the item's size along the main axis before remaining space is distributed via grow and shrink. When flex-direction: row it acts like width; when column, like height. Using flex-basis is preferred over width in flex containers because it correctly respects the axis direction.

What does the order property do?

The order property changes the visual rendering order of flex items without altering the HTML source. The default is 0; lower values appear first. Note that screen readers still follow source order, so use this for visual rearrangement only and ensure the source order is semantically meaningful.

Is flexbox supported in all browsers?

Yes. CSS Flexbox has full support across all modern browsers — Chrome, Firefox, Safari, Edge, and mobile browsers — with no vendor prefixes needed for current targets. It is safe to use in production for all web projects today.