CSS align-self Property

CSS align-self Property

The align-self property in CSS controls how a specific flex or grid item aligns itself along the cross-axis, overriding align-items for that item only.

1. Syntax

selector {
  align-self: value;
}

2. Accepted Values

Value	Description
auto (default)	Inherits from align-items (if in a flex/grid container).
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 text baseline with others.
stretch	Stretches the item to fill the container (if no fixed height/width).

3. Example – Align Items Differently in Flexbox

.container {
  display: flex;
  height: 200px;
  align-items: center; /* Default for all items */
}

.box {
  width: 50px;
  height: 50px;
  background: red;
}

.box1 { align-self: flex-start; }  /* Moves to the top */
.box2 { align-self: center; }      /* Stays in the middle */
.box3 { align-self: flex-end; }    /* Moves to the bottom */

✅ Each box aligns differently within the same flex container.

4. Example – align-self in CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 200px;
}

.grid-item {
  background: blue;
}

.item1 { align-self: start; }   /* Aligns to the top */
.item2 { align-self: center; }  /* Aligns in the middle */
.item3 { align-self: end; }     /* Aligns to the bottom */

✅ Works the same way in CSS Grid!

5. Best Practices

✔ Use align-self when only one item needs a different alignment.
✔ Avoid stretch for fixed-size elements to prevent unwanted scaling.
✔ Use baseline for text-heavy layouts.