🎯 CSS Tutorial: align-self

📌 Introduction

The align-self property in CSS allows an individual flex item to override the container’s align-items value. It gives you **fine-grained control** over alignment when you want one specific item to behave differently from others inside a flex or grid container. This is extremely useful for responsive tweaks, special UI elements, and one-off adjustments. 🎨✨

🎯 What Does align-self Do?

  • Overrides align-items for a single flex item
  • Controls alignment along the **cross axis**
  • Works in flexbox and CSS grid
  • Helps adjust layout without modifying the entire container

✨ Syntax

Syntax

item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Note

align-self only works on flex or grid items. The parent must have display: flex or display: grid.

🧩 Available Values

1. auto (default)

The item inherits the container’s align-items setting.

Code Snippet

align-self: auto;

2. flex-start

The item aligns to the **start** of the cross axis.

Code Snippet

align-self: flex-start;

3. flex-end

The item aligns to the **end** of the cross axis.

Code Snippet

align-self: flex-end;

4. center

The item aligns at the **center** of the cross axis.

Code Snippet

align-self: center;

5. baseline

Aligns the item based on text baselines—useful for typography alignment.

Code Snippet

align-self: baseline;

6. stretch

The item stretches to fill the cross axis (if no fixed size is set).

Code Snippet

align-self: stretch;

🔥 Practical Examples

1. Override One Item’s Alignment

Override Example

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

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

2. Center Only One Flex Item Vertically

Vertical Center

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

.item:nth-child(2) {
  align-self: center;
}

3. Stretch Only One Item

Stretch Example

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

.item.big {
  align-self: stretch;
}

4. Baseline Alignment for One Item

Baseline Example

.container {
  display: flex;
}

.item:last-child {
  align-self: baseline;
}

📊 Comparison: align-items vs align-self

PropertyTargetsUsage
align-itemsThe entire containerSet default alignment for all items
align-selfSingle flex/grid itemOverride alignment for specific elements

🧠 Tips for Using align-self

  • Use align-self when only **one element** needs different alignment, instead of modifying the whole container.
  • Works great for badges, icons, CTA buttons inside flex layouts.
  • stretch only works if the item doesn't have a fixed cross-axis size.
  • Ensures responsive layouts without rewriting container-level properties.
>>“align-self gives you precision: control exactly how one item behaves without affecting the whole layout.” ✨

🎉 Conclusion

The align-self property is a powerful flexbox and grid alignment tool. It provides fine control over how individual items align along the cross axis, offering flexibility without altering the overall layout. Master this property to build clean, responsive, and highly customizable UI layouts. 🚀