CSS Flexbox

Arrange one-dimensional layouts without fragile spacing hacks.

Container

display: flex;Create a flex formatting context

flex-direction: column;Stack along the block direction

gap: 1rem;Space items without child margins

flex-wrap: wrap;Allow items onto additional lines

justify-content: space-between;Distribute free space along the main axis

align-items: center;Center along the cross axis

align-self: flex-start;Override alignment for one item

margin-inline-start: auto;Push an item toward the inline end

flex: 1 1 0;Grow and shrink from a zero basis

flex: 0 0 auto;Keep intrinsic sizing without growing or shrinking

min-width: 0;Allow text-heavy items to shrink below their min-content width

flex-basis: 16rem;Set the starting main-axis size