Align Items

Below, utility classes to apply align-items property.

Class	Properties
.items-start	align-items: flex-start;
.items-center	align-items: center;
.items-end	align-items: flex-end;

Example(s)

1

2

3

<div class="h-48 flex-row items-start">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

1

2

3

<div class="h-48 flex-row items-center">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

1

2

3

<div class="h-48 flex-row items-end">
  <div class="sqrt-12 ...">1</div>
  <div class="sqrt-12 ...">2</div>
  <div class="sqrt-12 ...">3</div>
</div>

Media Queries

align-items is supported by changing state on-the-fly! You can use it like this:

<div class="items-start medium:items-center extra-large:items-end">...</div>