CSS Box Alignment, Baselines, and Safe Positioning

The essentials

Quick reference

One focused task per row. Jump to the related section for complete, working examples.

Use	Syntax	Examples
Align every item on the cross axis	`.row { align-items: center; }`	View examples
Align grid items on the inline axis	`.grid { justify-items: start; }`	View examples
Distribute cross-axis tracks	`.grid { align-content: space-between; }`	View examples
Distribute main or inline content	`.row { justify-content: space-between; }`	View examples
Set both item axes	`.grid { place-items: center start; }`	View examples
Set both distribution axes	`.grid { place-content: space-between center; }`	View examples
Override one item	`.featured { place-self: stretch center; }`	View examples
Create layout-owned spacing	`.cluster { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }`	View examples
Align first text baselines	`.cards { align-items: first baseline; }`	View examples
Align last text baselines	`.cards { align-items: last baseline; }`	View examples
Align form labels and controls	`.field-row { display: grid; grid-template-columns: 10rem 1fr; align-items: first baseline; }`	View examples
Center without start-side data loss	`.dialog { justify-self: safe center; }`	View examples
Permit positional overflow	`.decoration { align-self: unsafe end; }`	View examples
Protect a flex alignment	`.toolbar { justify-content: safe flex-end; }`	View examples
Push one flex item	`.actions .primary { margin-inline-start: auto; }`	View examples
Stretch an auto-sized item	`.grid { align-items: stretch; }`	View examples
Follow writing direction	`.toolbar { justify-content: start; }`	View examples
Keep source order meaningful	`.layout { display: grid; grid-template-areas: "nav main"; }`	View examples
Layer safe alignment support	`.panel { justify-self: start; } @supports (justify-self: safe center) { .panel { justify-self: safe center; }; }`	View examples

CSS Box Alignment provides a shared vocabulary across grid, flexbox, block layout, and positioned boxes, but each layout mode supports a different subset and maps axes differently. This guide distinguishes content distribution from item alignment, explains baseline groups and overflow-safe positioning, and keeps visual alignment from breaking reading order or enlarged content.

Step by step

Detailed examples

Match the property to the subject and axis

justify-* generally addresses the inline or main axis; align-* addresses the block or cross axis. items properties set defaults for children, self properties override one child, and content properties distribute the group of tracks or flex lines inside extra container space. Flexbox has no justify-items effect because main-axis free space is distributed for the group. normal and stretch resolve differently by layout mode, so inspect the actual formatting context.

Two-dimensional grid alignment

.grid { display: grid; min-block-size: 16rem; grid-template-columns: repeat(2, 8rem); place-content: center space-evenly; place-items: center; }

Back to quick reference ↑

Use shorthands without losing axis intent

place-content, place-items, and place-self take align then justify values; a missing second value copies the first. gap belongs to the container and works across grid, flex, and multicolumn with layout-specific percentage behavior. It creates gutters only between tracks or items, so use container padding for edge space. Prefer gap over inserting empty elements or textual separators that pollute semantics.

Wrapped actions with stable gutters

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem; }

Back to quick reference ↑

Align typographic baselines, not box edges

baseline means first baseline; first and last modifiers choose which baseline set participates. Items form baseline-sharing groups under layout-specific rules. If no compatible shared baseline exists, fallback alignment is safe self-start for first baseline and safe self-end for last baseline. Replaced boxes, orthogonal writing modes, and boxes without natural baselines can synthesize baselines. Test mixed fonts, controls, images, and multiline labels instead of assuming equal top padding.

Price cards aligned by heading baseline

.plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: first baseline; gap: 1rem; }
.plan h2 { font-size: clamp(1rem,3vw,2rem); }

Back to quick reference ↑

Prevent inaccessible overflow at the start edge

The safe overflow-position modifier changes positional alignment to start when the requested alignment would overflow in a way that risks data loss. unsafe honors the requested position regardless. Safe alignment does not wrap, resize, or create scrolling by itself, and distributed values have their own fallback behavior. Combine it with max sizes and overflow:auto for dialogs, toolbars, and localized labels.

Scrollable toolbar with an overflow-safe fallback

.toolbar { display: flex; max-inline-size: 100%; overflow: auto; justify-content: start; }
@supports (justify-content: safe center) { .toolbar { justify-content: safe center; } }

Back to quick reference ↑

Know which mechanism consumes free space first

In flex layout, auto margins absorb positive free space before justify-content runs, making margin-inline-start:auto a dependable way to push an action. Cross-axis auto margins override self-alignment. Stretch changes the auto size of an alignment subject while respecting min/max constraints; it does not indiscriminately scale definite-size media. For a group with wrapping, each flex line is aligned separately.

Push a primary action without reordering

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.actions .primary { margin-inline-start: auto; }

Back to quick reference ↑

Prefer logical alignment and meaningful DOM order

start and end follow the relevant writing-mode axis. flex-start and flex-end follow the flex main or cross direction; left and right are physical and have limited applicability. row-reverse, column-reverse, order, and grid placement can change visual order without changing DOM, speech, or keyboard focus order. Author the source in a meaningful sequence and use layout only when the alternative visual arrangement does not contradict it.

Logical navigation that adapts to direction

<nav class="nav" aria-label="Account"><a href="#profile">Profile</a><a href="#security">Security</a><button>Sign out</button></nav>

Logical positioning without order changes

.nav { display: flex; flex-wrap: wrap; justify-content: start; gap: .75rem; }
.nav button { margin-inline-start: auto; }

Back to quick reference ↑

Test free space, overflow, and user preferences

Alignment differences often appear only when there is positive free space, multiple flex lines, an oversized item, or an orthogonal writing mode. Keep a broadly supported start alignment before a safe enhancement. Test long translations, 400% zoom, RTL, vertical writing, large default fonts, focus indicators, and forced colors. Alignment must never be the only cue for hierarchy, state, or order.

Progressively enhance safe centering

.panel { justify-self: start; }
@supports (justify-self: safe center) { .panel { justify-self: safe center; } }
:focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }

Back to quick reference ↑

Local code tester

Compare edge and baseline alignment

Switch between center, safe center, and first-baseline alignment while a deliberately oversized item tests overflow behavior.

Runs in your browser

index.html

<link rel="stylesheet" href="styles.css">

<fieldset>
  <legend>Alignment</legend>
  <label>
    <input type="radio" name="a" value="start">
     start
  </label>
  <label>
    <input type="radio" name="a" value="center" checked>
     center
  </label>
  <label>
    <input type="radio" name="a" value="safe">
     safe center
  </label>
  <label>
    <input type="radio" name="a" value="baseline">
     first baseline
  </label>
</fieldset>
<div class="stage">
  <article>
    <strong>Small</strong>
    <p>One line</p>
  </article>
  <article class="large">
    <strong>Localized heading that needs room</strong>
    <p>Two lines of supporting text demonstrate alignment.</p>
  </article>
</div>

styles.css

* {
  box-sizing: border-box;
}
body {
  font: 1rem/1.5 system-ui;
  color: #172033;
}
fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  border: 0;
  padding: 0;
}
.stage {
  display: flex;
  gap: 1rem;
  min-block-size: 15rem;
  max-inline-size: 28rem;
  overflow: auto;
  padding: 1rem;
  border: 2px solid #94a3b8;
}
article {
  flex: 0 0 12rem;
  padding: 1rem;
  background: #dbeafe;
  border-radius: .5rem;
}
.large {
  flex-basis: 22rem;
}
body:has([value="start"]:checked) .stage {
  align-items: start;
  justify-content: start;
}
body:has([value="center"]:checked) .stage {
  align-items: center;
  justify-content: center;
}
body:has([value="safe"]:checked) .stage {
  align-items: safe center;
  justify-content: safe center;
}
body:has([value="baseline"]:checked) .stage {
  align-items: first baseline;
  justify-content: start;
}
.large strong {
  font-size: 1.5rem;
}
:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Preview

Sources and further reading

References

Authoritative documentation used to verify and expand this cheat sheet.

Help us improve

Found a typo or missing example?

Tell us what would make this cheat sheet clearer, more complete, or more useful.

Share feedback

Quick reference

Detailed examples

Match the property to the subject and axis

Use shorthands without losing axis intent

Align typographic baselines, not box edges

Prevent inaccessible overflow at the start edge

Know which mechanism consumes free space first

Prefer logical alignment and meaningful DOM order

Test free space, overflow, and user preferences

Compare edge and baseline alignment

More CSS cheat sheets

CSS Anchor Positioning Cheat Sheet

CSS aspect-ratio and Replaced Elements Cheat Sheet

CSS Container Queries and Containment Cheat Sheet

References

Found a typo or missing example?