Aligncontent

align-content distributes the lines of a wrap along the CROSS axis, the way justify distributes items along the main axis. Here tags wrap into lines by width, and align-content="space-between" spreads those lines to fill the fixed height. It only bites because the row has a definite height with spare room. Same _distribute() helper as justify, applied cross-axis.

Layout 316 × 372 <box><row>

Result

Source examples/aligncontent.svgn

<diagram width="316" height="372" padding="16" background="#fbfbfb" theme="light">
  <!-- align-content distributes the *lines* of a wrap along the CROSS axis, the
       way justify distributes items along the main axis. Here tags wrap into
       lines by width, and align-content="space-between" spreads those lines to
       fill the fixed height. It only bites because the row has a definite height
       with spare room. Same _distribute() helper as justify, applied cross-axis. -->
  <row wrap="true" width="284" height="340" gap="10" align="start" align-content="space-between">
    <box fill="#dce8d6" rx="14" padding="11">design</box>
    <box fill="#f2ddd7" rx="14" padding="11">layout</box>
    <box fill="#e9e6f2" rx="14" padding="11">grid</box>
    <box fill="#e6ecf3" rx="14" padding="11">flexbox</box>
    <box fill="#dce8d6" rx="14" padding="11">wrap</box>
    <box fill="#f2ddd7" rx="14" padding="11">aspect</box>
    <box fill="#e9e6f2" rx="14" padding="11">align-content</box>
    <box fill="#e6ecf3" rx="14" padding="11">intrinsic sizing</box>
    <box fill="#dce8d6" rx="14" padding="11">tracks</box>
    <box fill="#f2ddd7" rx="14" padding="11">two-pass</box>
  </row>
</diagram>

Open the SVG →