Column stack

flex-direction: column + gap for forms

Name

Email

Password

What Flexbox is doing

.stack-form — flex-direction: column + gap: 12px between fields
.field — nested column so the label sits above the input with a small gap
.stack-actions — switches back to a row with justify-content: flex-end so actions sit on the right

Main vs cross in a column

In a column, justify-content moves items vertically and align-items moves them horizontally. That swap is why flex-direction matters (rule 42).

Compare with the playground column stages in 01-playground.html.

Important HTML

Forms stack fields as a column.

<form class="stack-form">
  <label>…</label>
  <input>
  <div class="stack-actions">…</div>
</form>

Important CSS

Column flex stacks children vertically.

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}