Align Self

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

Classes

Use d-as-stretch to stretch an item along a parent's cross axis.

<div class="d-d-flex d-ai-flex-start">
  <div>1</div>
  <div class="d-as-stretch">2</div>
  <div>3</div>
</div>

Use d-as-flex-start to align an item to the start of the parent's cross axis.

<div class="d-d-flex">
    <div>1</div>
    <div class="d-as-flex-start">2</div>
    <div>3</div>
</div>

Use d-as-center to align an item along the center of the parent's cross axis.

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

Use d-as-flex-end to align an item from the end of the parent's cross axis.

<div class="d-d-flex">
  <div>1</div>
  <div class="d-as-flex-end">2</div>
  <div>3</div>
</div>