CSS Flexbox Playground

Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to design flexible and responsive layouts without using floats or positioning.

Key advantages:

• Easy alignment of items vertically and horizontally
• Distribution of space between items
• Reordering of items without changing HTML
• Responsive layouts with less code

Flexbox works with two axes:

• Main axis: Direction defined by flex-direction (horizontal for row, vertical for column)
• Cross axis: Perpendicular to main axis

justify-content aligns along main axis, align-items aligns along cross axis.

flex-grow: Controls how much an item grows to fill available space

• 0 = don't grow (default)
• 1 = grow equally with others that have flex-grow: 1
• 2 = grow twice as much

flex-shrink: Controls how much an item shrinks when space is limited

• 0 = don't shrink
• 1 = shrink equally (default)

flex-basis defines the initial size of a flex item before the remaining space is distributed.

• auto: Use the item's width/height or content size
• 0: Ignore content size, distribute all space by flex-grow
• specific value: Use this as starting size (e.g., 200px, 50%)

• Navigation bars: Space items evenly or to edges
• Card layouts: Equal height cards in a row
• Centering: Perfect centering both ways
• Sidebar layouts: Fixed sidebar with flexible main content
• Footer sticking: Keep footer at bottom of page
• Form layouts: Align labels and inputs

• Start with a preset layout to understand common patterns
• Adjust one property at a time to see its effect
• Click items to customize them individually
• Try different numbers of items to see how layouts adapt
• Use the wrap property with many items to see multi-line behavior
• Copy the generated CSS and use it in your projects