Thread by @sajalshlan

CSS align-self Property ⚡

Explained and Visualised ↓

As we know, the align-items property works on the flex-container - the whole container, every child element.

• The align-self property works on the flex-items - the single child element of the flex container.

Also, the align-self property overrides the align-items property.

If you want to read about the align-items property first, here you go:

Or else, let's continue ↓

Here, we are considering the main axis as horizontal (⇄) and the cross axis as vertical (⇅).

The align property works on the cross-axis.

All these properties work only when first the "display: flex;" property is applied.

Let's see it working in Flexbox ↓

• flex-start: The element will be positioned at the beginning of the container.

• flex-end: The element will be positioned at the end of the container.

• stretch: The element will be positioned to fit the container.

• center: The element will be positioned at the center of the container.

• baseline: The element will be positioned at the baseline of the container.

This ensures that the baselines of the text line up, as opposed to aligning the boxes around the content.

Thank you for reading!

- I'm Sajal
⚡ CSS Simplified; 101
☕ Web Development Resources
👨‍💻 Sharing my journey and learnings

If you liked it, then you can follow me, @SajalShlan for more such content.

Thanks for the support 🙌

If you liked it, you can share it with others by retweeting the first tweet from here ↓