← Tailwind CSS classes list

Tailwind CSS class: .self-start / .self-*

<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-auto flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-start flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-center flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-end flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-start bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-stretch flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>

Preview

1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

CSS source

.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

More in Tailwind CSS Flex