Design Atlas
한국어
▦ Layout

Flexbox alignment

플렉스박스 정렬

The two-axis rule for positioning flex items: justify-content on the main axis, align-items on the cross axis.

Also known as: justify-contentalign-itemsMain axis / cross axis
···
html
<div class="wrap">
  <div class="labels">
    <span class="lbl j" id="jl">justify-content: flex-start</span>
    <span class="lbl a" id="al">align-items: stretch</span>
  </div>
  <div class="box" id="box">
    <div class="chip"><b></b></div>
    <div class="chip"><b></b><b></b><b></b></div>
    <div class="chip"><b></b><b></b></div>
  </div>
</div>
css
.wrap{width:min(92%,560px);display:flex;flex-direction:column;gap:12px;align-items:center}
.labels{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lbl{font:700 clamp(9px,1.6vmin,11px)/1 ui-monospace,monospace;padding:5px 9px;border-radius:6px;
  background:var(--surface);border:1px solid var(--line);color:var(--accent-2);white-space:nowrap}
.lbl.a{color:var(--accent-3)}
.box{width:100%;height:min(62%,190px);border:2px dashed var(--muted);border-radius:10px;padding:10px;
  display:flex;gap:10px;transition:justify-content .6s,align-items .6s}
.chip{width:19%;border-radius:8px;background:var(--accent);color:#fff;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:4px;padding:8px 0;transition:background .3s}
.chip b{display:block;width:44%;height:5px;border-radius:3px;background:rgba(255,255,255,.85)}
js
const box = document.getElementById('box');
const jl = document.getElementById('jl');
const al = document.getElementById('al');
const combos = [
  { j: 'flex-start', a: 'stretch' },
  { j: 'center', a: 'flex-start' },
  { j: 'space-between', a: 'center' },
  { j: 'space-around', a: 'flex-end' },
  { j: 'flex-end', a: 'stretch' },
  { j: 'space-evenly', a: 'center' },
];
let i = 0;
function apply() {
  const c = combos[i % combos.length];
  box.style.justifyContent = c.j;
  box.style.alignItems = c.a;
  jl.textContent = 'justify-content: ' + c.j;
  al.textContent = 'align-items: ' + c.a;
  i++;
}
apply();
setInterval(apply, 1900);

Flexbox has two axes. With flex-direction: row, the main axis runs horizontally and the cross axis runs vertically. justify-content distributes space along the main axis; align-items positions (or stretches) each item along the cross axis. Confusing the two explains most "why won't this align" moments — switching to flex-direction: column swaps their roles entirely.

align-items defaults to stretch: an item with no explicit height fills the whole cross axis, and only shrinks to its natural size once you give it one (or pick center/flex-start/etc). That's why the chips below have different content (different numbers of lines) — so the stretch-vs-not difference is actually visible instead of theoretical.

justify-content also splits into space-between (flush ends, even gaps between), space-around (even space on both sides of each item, so edges get half as much as gaps) and space-evenly (edges get a full share too). The three only differ in how much space lands at the very edges, which is why they're hard to tell apart unless you compare them side by side.

When to use

For a single row or column, these two properties are the first thing to check. Once items wrap onto multiple lines, the gap between lines is align-content's job, not align-items'.