Flex Helpers

Small flex helpers for grow behavior and other one-line needs.

Grow

Use .grow when one item in a flex layout should take available space without overflowing.

<header class="cluster">
  <a href="/" class="brand">Actual CSS</a>
  <nav class="grow" aria-label="Main navigation">
    <a href="/docs">Docs</a>
    <a href="/components">Components</a>
  </nav>
  <button class="btn ghost" type="button">Menu</button>
</header>

CSS

.grow {
  flex: 1 1 auto;
  min-inline-size: 0;
}

Item Alignment

Use .items-start on flex or grid layouts when children should keep their natural height and align to the block-start edge. This is especially useful for form fields in a grid, where the default grid stretch would make short fields as tall as taller neighbors.

Name Notes

<div class="grid items-start">
  <label class="field">
    <span class="field-label">Name</span>
    <input type="text" />
  </label>
  <label class="field">
    <span class="field-label">Notes</span>
    <textarea></textarea>
  </label>
</div>

Use .items-center when a flex or grid layout should center its children on the cross axis. Use .items-end when children should align to the block-end edge.