graphql
react

Tailwind Align Self

The align-self utility class in Tailwind CSS allows you to control the vertical alignment of individual flex items within a flex container. With Tailwind align-self class, you can easily adjust the positioning of specific flex items along the cross-axis, overriding the default alignment set by the flex container.

Applying Tailwind Align Self

To apply the alignment to a specific flex item, you can use the tailwind self-{alignment} utility class, where {alignment} represents the desired alignment. Here are the available alignment options:

  • self-auto: Resets the alignment to the value set by the flex container.
  • self-start: Aligns the flex item to the start of the cross-axis. -self-end: Aligns the flex item to the end of the cross-axis.
  • self-center: Aligns the flex item to the center of the cross-axis.
  • self-baseline: Aligns the flex item to the baseline of the cross-axis.
  • self-stretch: Stretches the flex item to fill the cross-axis.
html
<div class="flex">
  <div class="bg-purple-500 h-8 w-8 self-start">Item 1</div>
  <div class="bg-purple-500 h-4 w-4 self-end">Item 2</div>
  <div class="bg-purple-500 h-6 w-6 self-center">Item 3</div>
</div>

Preview

Item 1
items 2
items 3

Responsive Tailwind Align Self

Tailwind CSS allows you to apply align self classes responsively at different breakpoints. To use responsive tailwind align self classes, you can append the breakpoint prefix to the utility class. For example, md:self-center applies the center alignment starting from the medium breakpoint and above.

html
<div class="flex">
  <div class="bg-gray-200 h-8 w-8 self-start md:self-center"></div>
  <!-- Other flex items -->
</div>

In the above example, the first flex item is aligned to the start of the cross-axis by default (self-start), but starting from the medium breakpoint and above, the alignment is changed to center (self-center).

Tailwind Align-self class Table

ClassProperties
self-autoalign-self: auto;
self-startalign-self: flex-start;
self-endalign-self: flex-end;
self-centeralign-self: center;
self-stretchalign-self: stretch;

Windframe Tailwind blocks

landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner