CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space among items in a container. You enable it with display: flex on a container element. It excels at aligning items along a single axis (row or column), distributing space, and handling dynamic or unknown sizes. Flexbox is supported in all modern browsers and is the go-to choice for component-level layouts like navigation bars, card layouts, and form controls.

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

justify-content controls how flex items are distributed along the main axis (horizontal by default), while align-items controls alignment along the cross axis (vertical by default). For example, justify-content: center centers items horizontally, and align-items: center centers them vertically. When flex-direction is set to column, the axes swap: justify-content controls vertical distribution and align-items controls horizontal alignment.

What does flex-wrap do?

By default, flex items try to fit on one line (flex-wrap: nowrap). Setting flex-wrap: wrap allows items to flow onto multiple lines when they exceed the container width. flex-wrap: wrap-reverse wraps items onto lines above the first line. When wrapping is enabled, you can use align-content to control spacing between the wrapped lines.

What do flex-grow, flex-shrink, and flex-basis mean?

flex-grow determines how much an item grows relative to other items when extra space is available (default 0, meaning no growth). flex-shrink determines how much an item shrinks when space is insufficient (default 1). flex-basis sets the initial size of an item before growing or shrinking (default auto, which uses the item's content size or width). Together they form the flex shorthand: flex: grow shrink basis.

When should I use Flexbox vs CSS Grid?

Use Flexbox for one-dimensional layouts where items flow in a single row or column, such as navigation bars, button groups, or card content. Use CSS Grid for two-dimensional layouts that need control over both rows and columns simultaneously, such as page layouts, dashboards, or image galleries. They complement each other well and are often used together in modern web design.

CSS Flexbox Visualizer

Interactive CSS Flexbox layout builder with live preview. Set container and item properties, see results instantly, and copy production-ready CSS. Everything runs in your browser.

Preview width:

Live Preview

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

3 Items

Generated CSS

How to Use CSS Flexbox

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model designed for distributing space among items in a container. Enable it with display: flex on any element, and its direct children become flex items that you can align, order, and size with powerful properties.

Container Properties

flex-direction sets the main axis: row (left to right), row-reverse, column (top to bottom), or column-reverse. flex-wrap controls whether items wrap to new lines. justify-content distributes items along the main axis, and align-items aligns them on the cross axis. align-content controls spacing between wrapped lines. gap adds consistent spacing between items.

Item Properties

flex-grow controls how much an item grows to fill available space. flex-shrink controls how it shrinks when space is tight. flex-basis sets the initial size before growing or shrinking. order changes the visual order without altering the HTML. align-self overrides the container's align-items for a single item.

Features

Set all container properties: flex-direction, flex-wrap, justify-content, align-items, align-content, gap
Per-item properties: flex-grow, flex-shrink, flex-basis, order, align-self
Add up to 10 flex items with distinct colors
Responsive preview at different widths (full, 768px, 480px, 320px)
Syntax-highlighted CSS output with one-click copy
Keyboard shortcuts: Ctrl+Enter to generate, Ctrl+Shift+C to copy, Ctrl+L to reset
100% client-side — nothing is sent to any server

Flexbox vs CSS Grid

Flexbox handles one-dimensional layouts (a row or a column) while CSS Grid handles two-dimensional layouts (rows and columns together). Use Flexbox for component-level layouts like navbars, card contents, and form groups. Use Grid for page-level layouts like headers, sidebars, and content regions. They work best when combined.

Browser Support

CSS Flexbox is supported in all modern browsers: Chrome 29+, Firefox 28+, Safari 9+, and Edge 12+. The gap property for Flexbox is supported in Chrome 84+, Firefox 63+, Safari 14.1+, and Edge 84+. No vendor prefixes are needed for any current browser.

CSS Flexbox Visualizer

How to Use CSS Flexbox

Container Properties

Item Properties

Features

Flexbox vs CSS Grid

Browser Support

Related Resources

CSS Grid Generator

Flexbox Complete Guide

Flexbox vs Grid

CSS Grid Complete Guide

Frequently Asked Questions