Dialtone

Align Items

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

Classes

ClassOutput
.d-ai-flex-startalign-items: flex-start
.d-ai-flex-endalign-items: flex-end
.d-ai-centeralign-items: center
.d-ai-baselinealign-items: baseline
.d-ai-stretchalign-items: stretch
.d-ai-normalalign-items: normal
.d-ai-unsetalign-items: unset

Stretch

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

<div class="d-d-flex d-ai-stretch">
  <div class="d-py8">1</div>
  <div class="d-py16">2</div>
  <div class="d-py4">3</div>
</div>

Flex Start

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

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

Center

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

<div class="d-d-flex d-ai-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Flex End

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

<div class="d-d-flex d-ai-flex-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
Last Updated: