Flexbox Alignment Playground - Online Visual Align & Justify

align-items controls how flex items are positioned along the cross axis within a single line. align-content controls how multiple lines of flex items are distributed along the cross axis when flex-wrap: wrap is enabled. If you only have one line (no wrap), align-content has no visible effect.

Set the parent container to display: flex; justify-content: center; align-items: center;. This centers the child both horizontally and vertically. Click the "Centered" preset above to see it in action.

flex-grow determines how much a flex item should grow relative to its siblings when there is extra space in the container. A value of 0 means "don't grow." If one item has flex-grow: 2 and another has flex-grow: 1, the first will take twice as much extra space as the second. Try it with the slider in the Selected Item panel!

Use flex-direction: column when you want items to stack vertically instead of horizontally. This is especially useful for mobile layouts, sidebar navigation, card stacks, or any vertical list where you need flex alignment powers. Remember that the main axis becomes vertical, so justify-content controls vertical spacing and align-items controls horizontal alignment.

• space-between: First item at start, last at end, equal gaps between.
• space-around: Each item has equal half-gaps on both sides (ends get half the gap).
• space-evenly: All gaps are identical, including at the edges.

Switch between them in the playground to see the visual difference instantly.

flex-basis sets the initial size of a flex item along the main axis before remaining space is distributed. Unlike width or height, flex-basis is direction-aware: it refers to width in row mode and height in column mode. It also respects flex-grow and flex-shrink, whereas a fixed width may not.