Align Items

Utilities for setting how an element's is aligned along an element's cross axis.

Stretch

Use d-ai-stretch to stretch items across the element's cross axis. This is the default value.

<dt-stack direction="row" class="d-ai-stretch">
  <div class="d-py8">1</div>
  <div class="d-py16">2</div>
  <div class="d-py4">3</div>
</dt-stack>

Use d-ai-flex-start to align items to the start of the element's cross axis.

<dt-stack direction="row" class="d-ai-flex-start">
  <div class="d-h32">1</div>
  <div class="d-h64">2</div>
  <div class="d-h16">3</div>
</dt-stack>

Use d-ai-center to distribute items along the center of the element's cross axis.

<dt-stack direction="row" class="d-ai-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</dt-stack>

Use d-ai-flex-end to distribute items from the end of the element's cross axis.

<dt-stack direction="row" class="d-ai-flex-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</dt-stack>