Flexbox Playground

What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a modern CSS layout system that makes it easy to design flexible, responsive interfaces. It provides a clean way to distribute space and align items in one dimension, automatically handling elements even when their size is unknown or dynamic. Flexbox is essential for modern web design and has become the preferred method for building responsive layouts.

How to Use the Flexbox Playground

Step 1 - Adjust Container Properties: On the left side, use the controls to change your flex container's behavior including direction, wrapping, alignment, and spacing. Watch the preview update in real-time as you make changes.

Step 2 - Select an Item: Click any colored numbered box in the preview to select it. Once selected, the item controls will appear below the preview allowing you to modify that specific item's properties.

Step 3 - Modify Item Properties: Change flex-grow, flex-shrink, flex-basis, align-self, and order values for the selected item. See how each change affects the layout immediately in the preview.

Step 4 - Copy Generated CSS: View the generated CSS code in the code panel. Choose between container CSS, item CSS, or both, then copy the code to use in your projects.

Common Use Cases for Flexbox

Navigation Bars: Create flexible navigation menus that adapt to different screen sizes, with items that can grow, shrink, and wrap as needed.

Card Layouts: Build responsive card grids that automatically reflow and adjust based on the viewport width without media queries.

Centering Content: Easily center content both horizontally and vertically using justify-content: center and align-items: center combinations.

Form Layouts: Design accessible form layouts with properly aligned labels, inputs, buttons, and helper text using flex alignment properties.

Page Layouts: Create full-page layouts with headers, sidebars, main content, and footers that adapt gracefully to different screen sizes.

Frequently Asked Questions

What's the difference between justify-content and align-items?

justify-content controls alignment along the main axis (horizontal in row direction, vertical in column direction), while align-items controls alignment along the cross axis (perpendicular to the main axis). Main axis is the primary flow direction of your flex container.

How does flex-grow work with multiple items?

flex-grow determines how much an item grows relative to other items. If all items have flex-grow: 1, they share available space equally. If one item has flex-grow: 2 and others have flex-grow: 1, it takes twice as much space. The ratio determines the proportion of growth.

What's the difference between flex-wrap and flex-direction?

flex-direction controls the direction of the main axis (row, column, row-reverse, column-reverse), while flex-wrap determines whether items stay on one line or wrap to new lines. Together they control both the flow direction and how items break across lines.

When should I use align-content instead of align-items?

Use align-items to align items within their individual line (on the cross axis). Use align-content to align all lines as a group when flex-wrap: wrap creates multiple lines. align-content only applies when there are multiple wrapped lines.

What's the difference between flex-basis and width/height?

flex-basis defines the default size of an item before flex-grow and flex-shrink apply. Width/height are fixed dimensions. flex-basis works better in flex contexts because it automatically responds to flex properties and container space.

How do I make all flex items equal width?

Set flex: 1 on the items (shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0). This makes each item grow equally to fill available space regardless of content. You can also use flex-basis: 0 with flex-grow: 1.