Align Self In Tailwind CSS
In this article, we will explore what Tailwind align self is, how it works, and how to use it effectively in your web development projects.
The align-self class in Tailwind CSS provides a quick and easy way to set the align-self property.
Tailwind align self aligns an individual flex item along the cross-axis (vertical axis) of a flex container.
Tailwind align-self lets you specify the vertical alignment of a flex item in conjunction with a flex container.
Tailwind Align Self: how does it work?
The align-self property can be assigned to any flex item, such as a div or an image.
This property determines how a flex item is aligned vertically within a flex container.
When a container is set to display: flex and flex-direction: row, the align-self property can be used to align flex items vertically.
Tailwind CSS supports the following align-self values:
- auto – This value allows the flex container to decide how the flex item should be aligned.
- start – Positions the flex item at the start of the cross-axis.
- End – Positions the flex item at the cross-axis end.
- Center – Aligns the flex item at the cross-axis center.
- baseline – Sets the flex item’s baseline to the flex container’s baseline.
- Stretch – Fills the container to the full height of the flex item.
Tailwind Align Self-auto
Align-auto inherits the align-items property of its parent container.
It inherits stretched as a default value if it does not have a parent container.
Syntax:
<element class="self-auto">...</element>
You can assign the align-self class to any flex item within a flex container by combining the align-self keyword with the desired value:
Example:
Tailwind Align Self-start
When used with a flex container, align-self-start aligns a flex item to the top of the cross-axis.
Text, images, and other elements can be aligned to the top of a container when the default alignment is not preferred.
Syntax:
<element class="self-start">...</element>
Flex items can be aligned to the top of a container by adding the class align-self-start:
Example:
Tailwind Align Self-end
An align-self-end property aligns a flex item to the end of the cross-axis of a flex container.
Syntax:
<element class="self-end">...</element>
Flex items will appear in flex-direction of column at the bottom of the container, or on flex-direction of row at the right of the container:
Example:
Tailwind Align Self-center
The align-self-center property aligns a flex item vertically in the center of the container.
Within a container, you can center text, images, and other elements by using this feature.
Syntax:
<element class="self-center">...</element>
You can align flex items to the center of a container by adding the class align-self-center:
Example:
Tailwind Align Self-baseline
By setting the align-self property to baseline, the align-self property of an item aligns with the baseline of a flex container.
Syntax:
<element class="self-baseline">...</element>
You can use this if you want to align items with different font sizes and line heights along a common baseline.
Example:
Tailwind Align Self-stretch
An align-self-stretch property stretches flex items across the cross-axis to their full height.
It is especially useful when HTML elements, such as images and form inputs, need to fill the whole container height.
Syntax:
<element class="self-stretch">...</element>
To stretch a flex item to the full height of the container, add the align-self-stretch class:
