Flex into a Row or a Column with flex-direction

Change the Spacing of Flexed Components with justify-content

Change the off-axis Alignment of a Flexed Container with `align-items`

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

Wrap Elements Inside of a Flexed Container with `flex-wrap`

Proportionally Grow a Flexed Element by Setting `flex-grow` or `flex` Styles

Get Started with Flexbox CSS Layouts

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 `

https://app.egghead.io/api/v1/lessons/css-change-the-alignment-of-a-single-flexed-item-with-align-self/subtitles

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.

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

Share this video with your friends

Course

Get Started with Flexbox CSS Layouts