Align Self
Utilities for setting how an element's is aligned along a parent's cross axis.
Classes
Class | Output |
---|---|
.d-as-flex-start | align-self: flex-start |
.d-as-flex-end | align-self: flex-end |
.d-as-center | align-self: center |
.d-as-baseline | align-self: baseline |
.d-as-stretch | align-self: stretch |
.d-as-normal | align-self: normal |
.d-as-auto | align-self: auto |
.d-as-unset | align-self: unset |
Stretch
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>
Flex Start
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>
Center
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>
Flex End
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>