Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Chris AchardChris Achard
    cssCSS

    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

    Code

    Code

    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
    Discuss

    Discuss

    Transcript

    Transcript

    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.