LayoutIntermediate

Flexible Box Layout (Flexbox) Guide

Learn row-column direction layouts alignment rules, alignment axes mapping, wrap presets, and gap spacings.

Flexbox Layout Archetype

Flexbox distributes items along a single axis (row or column).

# Main Axis vs. Cross Axis

**Main Axis**: Controlled by `flex-direction`. Align items along this axis using `justify-content`.
**Cross Axis**: Runs perpendicular to the main axis. Align items along this axis using `align-items`.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Center horizontally */
  align-items: center;    /* Center vertically */
}