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

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 4 years ago

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

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.

egghead
egghead
~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today