Tailwind Align Items
The tailwind align-items
utility class allows you to control the vertical alignment of flex items within a flex container. With Tailwind align items class, you can easily adjust the positioning of flex items along the cross-axis.
Applying Align Items
To apply the alignment to a flex container, you can use the items-{alignment}
utility class, where {alignment}
represents the desired alignment. Here are the available alignment options:
items-start
: Aligns flex items to the start of the cross-axis.items-end
: Aligns flex items to the end of the cross-axis.items-center
: Aligns flex items to the center of the cross-axis. -items-baseline
: Aligns flex items to the baseline of the cross-axis.items-stretch
: Stretches flex items to fill the cross-axis.
<div class="flex items-center"> <div class="bg-blue-500 h-8 w-8">Items 1</div> <div class="bg-blue-500 h-4 w-4">Items 2</div> <div class="bg-blue-500 h-6 w-6">Items 3</div></div>
Preview
Responsive Tailwind Align Items
Tailwind CSS allows you to apply align items classes responsively at different breakpoints. To use responsive tailwind align items classes, you can append the breakpoint prefix to the utility class. For example, md:items-center
applies the center alignment starting from the medium breakpoint and above.
<div class="flex items-start md:items-center"> <!-- Flex items here --></div>
In the above example, the flex items are aligned to the start of the cross-axis by default (items-start)
, but starting from the medium breakpoint and above, the alignment is changed to center (items-center)
.
Tailwind Align Items Class Table
Class | Properties |
---|---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-center | align-items: center; |
items-baseline | align-items: baseline; |
items-stretch | align-items: stretch; |
Windframe Tailwind blocks
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.