⇄ CSS Flexbox

Activating Flexbox

Add display: flex to any element to make it a flex container. Its direct children become flex items. By default, items line up in a row and shrink to fit.

Container Properties

• flex-direction: row | column — which direction items flow
• justify-content — alignment along the main axis (row = horizontal): flex-start, center, flex-end, space-between, space-around, space-evenly
• align-items — alignment along the cross axis (row = vertical): stretch, flex-start, center, flex-end
• flex-wrap: wrap — let items wrap to the next line instead of shrinking
• gap — spacing between flex items (modern, preferred over margins)

Item Properties

• flex: 1 — item grows to fill available space (shorthand for flex-grow:1 flex-shrink:1 flex-basis:0)
• flex: 0 0 200px — fixed 200px, no grow/shrink
• align-self — override align-items for a specific item
• order — change visual order without changing HTML