12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
15 : 05 : 52 : 43
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
Become a member
to unlock all features

    Change the Alignment of a Single Flexed Item with 'align-self'

    Chris AchardChris Achard

    Inside of a flexed container, a single item can control its own flex with align-self. The possible values are flex-start, flex-end, center, or stretch



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Chris Achard: We have three different colored boxes here. They're flexed in this container. The container has a flex direction of rows. That's the axis direction. There's space between it using justify content. Then we have a line item's center. In the off-axis direction, we have them centered.

    Let's say we just want to deal with this red box right here. That's box number one. Then we can align-self, and we have a few options. First of all, we can say flex-start. If we refresh, that will jump to the top. We can move just one of the boxes by aligning the self. We could also do flex-end or center. They're all centered, but it centers itself now.

    We can also do align-self stretch. Right now, this just looks like it moved it to the top. That's because we're fixing its width and its height. If instead we set a min-height, then it would stretch itself in the off-axis direction.

    Height will override the stretch, but if we align-self stretch with a min height, it will stretch in the off-axis direction, which means if we change this flex direction to row for the body and column for the container, now we get it. It's trying to stretch itself in the off-axis direction, but we have that width fix.

    Let's change that to min width. Now it has a min height and a min width. It will try to stretch itself in the off-axis direction.