Theory
Theory
Comments

The align-self property, or selfish alignment

The arrangement of items along the main axis is set for the entire flex container, and it is equally applied to all flex items. You cannot assign an arrangement along the main axis to a particular item that differs from the arrangement of other items. This makes sense, because otherwise the items could run into each other.

Everything is even simpler with the cross axis. We can say that it is unique for each item, and you can assign them a different cross axis alignment. To do this, you can use the align-self property, which is assigned for the flex items themselves and not for the flex container.

The align-self property has the very same values as align-items.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Selfish alignment, align-self</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug rudolf"></div> <div class="rug muffin"></div> <div class="rug simba"></div> </div> </body> </html>

CSS

.room { display: flex; justify-content: center; align-items: stretch; }

Goalscompleted

Align Rudolf’s rug (.rudolf) at the start of the cross axis,
align Muffin’s rug (.muffin) at the end of the cross axis,
and finally align Simeon’s rug (.simba) in the center of the axis (center).

The align-self property, or selfish alignment

Comments

Log in

Sign up

Restore access