CSS Flexbox Playground

About CSS Flexbox

Flexbox (Flexible Box Layout) is a CSS layout model designed for building responsive, dynamic layouts. It distributes space among items in a container, even when their sizes are unknown.

Key Concepts

• Main axis: The primary axis along which items are laid out (horizontal for row, vertical for column)
• Cross axis: Perpendicular to the main axis
• justify-content: Aligns items along the main axis
• align-items: Aligns items along the cross axis
• flex-grow: How much an item grows relative to siblings (0 = don't grow)
• flex-shrink: How much an item shrinks when space is limited
• flex-basis: Default size before growing/shrinking (like width/height)

FAQ

Flexbox vs Grid — when to use which?

Use Flexbox for one-dimensional layouts (a row or a column of items). Use CSS Grid for two-dimensional layouts (rows AND columns). Flexbox is great for navbars, card rows, and centering. Grid is better for page layouts and complex grids.

What does flex: 1 mean?

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It means the item will grow to fill available space equally with other flex: 1 items.