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

Chris Achard: [00:00] 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.

[00:17] 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.

[00:45] 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.

[01:00] 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.

[01:19] 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.