Campus Design System

Appearance

Align Self ​

Utilities for controlling the alignment of individual grid items along the block (column) axis.

Class NameCSS Equivalent
self-autoalign-self: auto;
self-startalign-self: flex-start;
self-centeralign-self: center;
self-endalign-self: flex-end;
self-stretchalign-self: stretch;
self-baselinealign-self: baseline;

Align Self Auto ​

The .self-auto class sets the align-self property to auto, allowing the item to inherit its parent container's alignment along the block (column) axis.

html
<div class="flex items-stretch gap-s h-3xs">
  <div class="[...]">1</div>
  <div class="[...] self-auto">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Align Self Start ​

The .self-start class sets the align-self property to flex-start, aligning the item at the start along the block (column) axis.

html
<div class="flex items-stretch gap-s h-3xs">
  <div class="[...]">1</div>
  <div class="[...] self-start">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Align Self Center ​

The .self-center class sets the align-self property to center, aligning the item at the center along the block (column) axis.

html
<div class="flex items-stretch gap-s h-3xs">
  <div class="[...]">1</div>
  <div class="[...] self-center">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Align Self End ​

The .self-end class sets the align-self property to flex-end, aligning the item at the end along the block (column) axis.

html
<div class="flex items-stretch gap-s h-3xs">
  <div class="[...]">1</div>
  <div class="[...] self-end">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Align Self Stretch ​

The .self-stretch class sets the align-self property to stretch, allowing the item to stretch along the block (column) axis.

html
<div class="flex items-center gap-s h-3xs">
  <div class="[...]">1</div>
  <div class="[...] self-stretch">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Align Self Baseline ​

Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start, the one for last baseline is end.