CSS Flexbox Guide

Flex Container

Apply these to the flex parent to establish a flex formatting context.

display: flex

.container {
  display: flex; /* or inline-flex */
}

Turns the element into a flex container; direct children become flex items.

flex-direction

.container {
  flex-direction: row;        /* main axis: left → right */
  flex-direction: row-reverse;/* main axis: right → left */
  flex-direction: column;     /* main axis: top → bottom */
  flex-direction: column-reverse; /* bottom → top */
}

flex-wrap

.container {
  flex-wrap: nowrap;   /* default: single line */
  flex-wrap: wrap;     /* items wrap to new line */
  flex-wrap: wrap-reverse; /* wrap in reverse cross-axis */
}

flex-flow (shorthand)

.container {
  /* flex-direction || flex-wrap */
  flex-flow: row wrap;
}

justify-content (main axis)

.container {
  justify-content: flex-start;   /* start of main axis */
  justify-content: flex-end;     /* end of main axis */
  justify-content: center;       /* center along main axis */
  justify-content: space-between;/* equal space between */
  justify-content: space-around; /* space on both sides */
  justify-content: space-evenly; /* equal spacing */
}

Try it: justify-content

align-items (cross axis)

.container {
  align-items: stretch;     /* default: fill cross size */
  align-items: flex-start;  /* start of cross axis */
  align-items: flex-end;    /* end of cross axis */
  align-items: center;      /* center on cross axis */
  align-items: baseline;    /* align text baselines */
}

Try it: align-items

align-content (multi-line)

.container {
  /* Only applies when there are multiple rows/columns (wrap) */
  align-content: stretch;
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

Flex Items

Properties that control how individual items size and align inside the container.

flex (shorthand)

.item {
  /* flex-grow | flex-shrink | flex-basis */
  flex: 1 1 auto;     /* default */
  flex: 0 1 auto;     /* don't grow */
  flex: 1 0 200px;    /* grow, no shrink, basis 200px */
  flex: 0 0 auto;     /* size to content, no grow/shrink */
}

/* Common presets */
.flex-1 { flex: 1 1 0; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: 0 0 auto; }

flex-grow / flex-shrink / flex-basis

.item {
  flex-grow: 0;   /* 0 = don't grow, 1+ = can take extra space */
  flex-shrink: 1; /* 0 = don't shrink, 1+ = can shrink */
  flex-basis: auto; /* initial size: auto | 0 | length */
}

/* Example: 3-column layout with basis */
.item { flex: 1 1 300px; }

align-self

.item {
  align-self: auto;       /* follows align-items */
  align-self: stretch;
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
}

order

.item { order: 0; }  /* default 0, lower comes first */
.first { order: -1; }
.last  { order: 999; }

Wrapping & Order

Control when items wrap, the direction they flow, and their visual order independent of source order.

Row vs Column behavior

Row direction

Main axis is horizontal; width is primary sizing, height uses align‑items.

.container { display:flex; flex-direction: row; }

Column direction

Main axis is vertical; height is primary sizing, width uses align‑items.

.container { display:flex; flex-direction: column; }

Wrapping strategies

.container {
  display: flex;
  flex-flow: row wrap; /* common responsive rows */
  gap: 1rem;           /* use gap instead of margins */
}

.item { flex: 1 1 250px; } /* wraps into new row at ~250px */

Try it: flex-wrap

Sizing & Flex Values

How Flexbox distributes free space and resolves sizes.

Concept	Rule of Thumb	Example
`flex-basis`	Initial size along main axis before growing/shrinking.	`.item { flex-basis: 200px; }`
`flex-grow`	Share remaining free space proportionally.	`.item { flex-grow: 2; }` gets twice the extra of `1`
`flex-shrink`	Shrink when not enough space; 0 prevents shrinking.	`.item { flex: 0 0 300px; }` never shrinks
Min/Max size	Use `min-width`/`max-width` to clamp flexing.	`.item { min-width: 200px; }`

Tip: Set min-width: 0 on flex items containing overflowing content to allow them to shrink below intrinsic size.

Common Patterns

Centering (both axes)

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Responsive card row

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.card { flex: 1 1 300px; }

Sticky footer layout

.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main { flex: 1 0 auto; }
.footer { flex: 0 0 auto; }

Split view

.split {
  display: flex;
}
.left { flex: 2 1 0; }
.right { flex: 1 1 0; }

Equal-height columns (auto by default)

.row {
  display: flex;
  align-items: stretch; /* default */
}

.col { flex: 1; }

Gotchas

Min-content overflow

Text/content may overflow. Add min-width: 0 or min-height: 0 on items to allow shrinking.

Percentage heights

In column direction, set explicit heights on ancestors for percentages to work.

Alignment affects size

align-items: stretch can change item cross sizes; override with align-self.

Note: Use the gap property with Flexbox (widely supported) instead of margins for cleaner spacing.