Flexbox Playground

Flexbox (Flexible Box Layout) is a CSS layout model for creating flexible one-dimensional layouts. It makes it easy to align items horizontally or vertically, distribute space between them, and control their display order. Flexbox is especially useful for navigation menus, cards, and centering content.

Flexbox works in one dimension — a row or column — while Grid is designed for two-dimensional layouts (rows and columns together). Flexbox is ideal for aligning items within a container, centering, and distributing space. Grid is better for complex layouts with fixed columns and rows.

Use display: flex on the parent, then justify-content: center and align-items: center. This is a classic way to center elements without margins or positioning. To center vertically across the full screen height, add min-height: 100vh to the flex container.

flex-grow determines how much an item can grow relative to others when there is free space. flex-shrink determines how much an item can shrink when space is limited. A flex-shrink value of 0 prevents shrinking, which is useful for fixed sidebars.

Modern Flexbox is supported by all current browsers, including IE 11 (with prefixes and limitations). IE 10 and earlier require polyfills or alternative markup. In 2025, the share of browsers without Flexbox support is minimal.