Andromeda
Note

CSS Flexbox

Definition

A one-dimensional CSS layout model where a flex container distributes space among flex items along a main axis, with powerful alignment and sizing controls for components like nav bars, cards, and form rows.

Why It Matters

Flexbox provides a robust, predictable way to distribute space and align components. It eliminates the need for fragile layout hacks, making responsive and accessible UI development significantly faster and more reliable.

Core Concepts

  • display: flex: Creates flex container; children become flex items.
  • Main Axis / Cross Axis: Defined by flex-direction (row, column, reverses).
  • Container: justify-content (main axis), align-items (cross axis), flex-wrap, align-content.
  • Items: flex shorthand (grow shrink basis), align-self, order.
  • Use Case: Navigation bars, equal-height columns, vertically centered content.
.container {
  display: flex;
  justify-content: space-between; /* Horizontal alignment */
  align-items: center;          /* Vertical alignment */
}

.item {
  flex: 1; /* Grow to fill available space */
}

Connected Concepts

Connected notes