Align Self
Class reference
Auto Default
Use .self-auto
to align an item based on the value of the flex container's align-items
property:
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-auto flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Start
Use .self-start
to align an item to the start of the flex container's cross axis, despite the container's align-items
value:
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-start flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Center
Use .self-center
to align an item along the center of the flex container's cross axis, despite the container's align-items
value:
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-center flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
End
Use .self-end
to align an item to the end of the flex container's cross axis, despite the container's align-items
value:
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-end flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Stretch
Use .self-stretch
to stretch an item to fill the flex container's cross axis, despite the container's align-items
value:
<div class="flex items-start bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-stretch flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Responsive
To control the alignment of a flex item at a specific breakpoint, add a {screen}:
prefix to any existing utility class. For example, use md:self-end
to apply the self-end
utility at only medium screen sizes and above.
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
Customizing
Responsive and State Variants
By default, only responsive variants are generated for align-self utilities.
You can control which variants are generated for the align-self utilities by modifying the flexbox
property in the modules
section of your Tailwind config file.
For example, this config will also generate hover and focus variants:
Note that modifying the flexbox
property will affect which variants are generated for all Flexbox utilities, not just the align-self utilities.
Disabling
If you don't plan to use the align-self utilities in your project, you can disable them entirely by setting the flexbox
property to false
in the modules
section of your config file:
Note that modifying the flexbox
property will affect which variants are generated for all Flexbox utilities, not just the align-self utilities.