How to Use align-self in Flexbox: Simple Guide

The align-self property in flexbox lets you override the container's align-items setting for a single flex item. It controls how that item aligns along the cross axis (vertical if flex-direction is row) inside the flex container.

Syntax

The align-self property accepts these main values:

• auto: Uses the container's align-items value (default).
• flex-start: Aligns the item to the start of the cross axis.
• flex-end: Aligns the item to the end of the cross axis.
• center: Centers the item along the cross axis.
• baseline: Aligns the item’s baseline with other items.
• stretch: Stretches the item to fill the container (if no fixed size).

css

selector {
  align-self: value;
}

Example

This example shows a flex container with three items. The container uses align-items: center; to center all items vertically. The second item uses align-self: flex-start; to align itself to the top instead.

css

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  height: 150px;
  border: 2px solid #333;
  align-items: center;
  gap: 10px;
  padding: 10px;
}
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}
.item:nth-child(2) {
  align-self: flex-start;
  background-color: #f44336;
}

Output

A horizontal bar with three colored boxes inside. The first and third boxes are vertically centered inside the container. The middle box is aligned to the top edge of the container.

Common Pitfalls

One common mistake is expecting align-self to work without a flex container. It only works on flex items inside a container with display: flex; or inline-flex;.

Another pitfall is confusing align-self with justify-self, which does not work in flexbox.

Also, if the container’s flex-direction is column, the cross axis is horizontal, so align-self controls horizontal alignment, not vertical.

css

/* Wrong: align-self on non-flex item */
div {
  align-self: center; /* No effect if parent is not flex container */
}

/* Right: parent is flex container */
.container {
  display: flex;
}
.item {
  align-self: center;
}

Quick Reference

align-self values and their effects:

• auto: Use container’s align-items.
• flex-start: Align to start of cross axis.
• flex-end: Align to end of cross axis.
• center: Center along cross axis.
• baseline: Align baselines of text.
• stretch: Stretch to fill cross axis.

Key Takeaways

Use align-self to control alignment of a single flex item along the cross axis.

align-self overrides the container’s align-items for that item only.

It only works on flex items inside a container with display: flex or inline-flex.

Remember the cross axis depends on flex-direction: horizontal for column, vertical for row.

Common values include auto, flex-start, flex-end, center, baseline, and stretch.