display: flex - Enables flexbox context

flex-direction: row - Items in a row (default)

flex-direction: column - Items in a column

justify-content: center - Center items on main axis

justify-content: space-between - Distribute items evenly (first/last at edges)

align-items: center - Center items on cross axis

flex-wrap: wrap - Allow items to wrap to next line

flex: 1 - Grow to fill available space

order: 1 - Change visual order of item

gap: 1rem - Space between items

Developer Reference

CSS Flexbox Guide

Properties for the Flexible Box Layout Module. Align, justify, and wrap like a pro.

Flexbox is a one-dimensional layout method for laying out items in rows or columns. It makes it easier to design flexible responsive layout structure without using float or positioning.

Container

Enables flexbox context

display: flex

Direction

Items in a row (default)

flex-direction: row

Items in a column

flex-direction: column

Alignment

Center items on main axis

justify-content: center

Distribute items evenly (first/last at edges)

justify-content: space-between

Center items on cross axis

align-items: center

Wrapping

Allow items to wrap to next line

flex-wrap: wrap

Item

Grow to fill available space

flex: 1

Change visual order of item

order: 1

Force break to new line

flex-basis: 100%

Spacing

Space between items

gap: 1rem

Shorthand

Center align & justify (grid/flex)

place-items: center

Tricks

Push item to the right (in flex row)

margin-left: auto

This guide covers parent properties (container) and child properties (items), correcting common misconceptions about justify-content vs align-items.