Align Items In Tailwind CSS
Our goal in this article is to examine the Tailwind Align Items and how they can be used to align items vertically in flex containers.
Before we dive into Tailwind Align Items, let’s take a moment to understand how Flexbox works.
There are two main axes in a flex container – the main axis and the cross axis. Layout is determined by the main axis, which can be horizontal (in a row) or vertical (in a column). Cross-axis is perpendicular.
Flex items can be aligned along the main and cross-axes. Align-items and align-self properties control alignment along the cross-axis, whereas justify-content controls alignment along the main axis.
Tailwind Align Items
In Tailwind Align Items, a number of CSS classes allow item alignment along the cross-axis.
This class allows items inside a flexible container or in a given window to be aligned.
By using the align-items property, you can align items on a flex container’s cross-axis.
Tailwind Css Items
Here are the items available in Tailwind CSS:
- Items-start – align items at the start of the container.
- Items-center – center items vertically in the container.
- Items-end – align items at the end of the container.
- Items-baseline – align items to their baselines.
- Items-stretch – Stretch items to fill the container vertically.
How do these utilities work? Let’s examine each one closely.
Items-start
Flex items are aligned at the start of the container along the cross-axis.
The align-items property is set to flex-start.
Syntax
<element class="items-start">...</element>
Example:
Items-center
The items-center property centers flex items vertically in the container along the cross-axis.
This is similar to using the align-items property to center.
Syntax:
<element class="items-center">...</element>
Items should be positioned vertically in the center of the container:
Example:
Items-end
The items-end property in Tailwind CSS is set to align flex items at the end of the container along the cross-axis.
This is the same as using the align-items property with flex-end.
Syntax:
<element class="items-end">...</element>
Example:
Items-baseline
Flex items are aligned on their baselines with items-baseline.
It’s the same as using baseline-align-items.
Syntax:
<element class="items-baseline">...</element>
Items will be placed along the container’s baseline:
Example:
items-stretch
The items-stretch property is set to stretch flex items to fill the container along the cross-axis.
Syntax:
<element class="items-stretch">...</element>
Items are stretched to fit the container:
Example:
Now you know how Tailwind Align Items works.
