align-self

Definition

align-self is a CSS property that is used to align a single flex item within a flex container. It allows you to override the default alignment of a flex item, which is determined by the align-items property of the flex container.

Examples

.item {
  align-self: flex-start;
}

This will align the .item element to the start of the flex container (top for a vertical orientation).

.item {
  align-self: flex-end;
}

This will align the .item element to the end of the flex container (bottom for a vertical orientation).

.item {
  align-self: center;
}

This will center the .item element within the flex container.

.item {
  align-self: stretch;
}

This will stretch the .item element to fill the flex container.

.item {
  align-self: baseline;
}

This will align the .item element along its baseline.

.item {
  align-self: initial;
}

This will set the alignment of the .item element to its default value.

.item {
  align-self: auto;
}

This will inherit the alignment value from the parent flex container for the .item element.

Values

Best Practices

Here are some best practices for using align-self:

1. Use align-self to align a single flex item within a flex container. It has no effect on the entire flex container or on multiple flex items.
2. Use align-self to override the default alignment of a flex item, which is determined by the align-items property of the flex container.
3. Use align-self to align the flex item to the start, end, or center of the flex container.
4. Use align-self to stretch the flex item to fill the flex container.
5. Use align-self to align the flex item along its baseline.
6. Use align-self in combination with align-items to achieve the desired alignment of flex items within a flex container.

Here is an example of how align-self and align-items can be used together:

.container {
  display: flex;
  align-items: flex-start;
}

.item {
  align-self: flex-end;
}

In this example, the .item element will be aligned to the end of the flex container, even though the other flex items in the .container element are aligned to the start. This allows you to specify different alignments for individual flex items within the same flex container.

Browser Compatibility