Styling Elements

Align-Self

Last Updated:

July 25, 2024

Figure 1. Animation demonstrating state layer implementation.

No items found.

Overview

Class Name	CSS Properties	Description
`.align-self__start`	`align-self: start;`	Aligns the item to the start of the cross axis.
`.align-self__end`	`align-self: end;`	Aligns the item to the end of the cross axis.
`.align-self__center`	`align-self: center;`	Centers the item along the cross axis.
`.align-self__stretch`	`align-self: stretch;`	Stretches the item to fill the container along the cross axis.
`.align-self__baseline`	`align-self: baseline;`	Aligns the item along the container's baseline.
`.align-self__auto`	`align-self: auto;`	Applies the default alignment for the item based on the parent container's alignment settings.

Recommended Usage

Customization

Resources that mention this topic

No items found.

info

Get Help from a LiftKit Expert

arrow_forward

Book Quick Chat

Give Us Feedback

Click or tap to reveal form.

expand_more

check_circle

Success! An email has been sent to you with more details.

Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.

error

Error: Something went wrong. Email info@chainlift.io directly for assistance.

content_copy

Copy Code

.align-self__start {
  align-self: start;
}

.align-self__end {
  align-self: end;
}

.align-self__center {
  align-self: center;
}

.align-self__stretch {
  align-self: stretch;
}

.align-self__baseline {
  align-self: baseline;
}

.align-self__auto {
  align-self: auto;
}

code snippets will appear here