Treehouse: Grow your CSS skills. Land your dream job.

align-self

Last updated on:

The align-self property is a sub-property of the Flexible Box Layout module.

It makes possible to override the align-items value for specific flex items.

The align-self property accepts the same 5 values as the align-items:

  • flex-start: cross-start margin edge of the item is placed on the cross-start line
  • flex-end: cross-end margin edge of the item is placed on the cross-end line
  • center: item is centered in the cross-axis
  • baseline: items are aligned such as their baseline are aligned
  • stretch (default): stretch to fill the container (still respect min-width/max-width)

Syntax

align-self: auto | flex-start | flex-end | center | baseline | stretch

.flex-item {
  align-self: flex-end;
}

Demo

The following demo shows how an item can align itself in the flex container depending on the align-self value:

  • The 1st item is set to flex-start
  • The 2nd item is set to flex-end
  • The 3rd item is set to center
  • The 4th item is set to baseline
  • The 5th item is set to stretch
Check out this Pen!

Related Properties

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex;)
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
  • (old) means the old syntax from 2009 (e.g. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

Comments

  1. Kyle Peatt

    I think the support table on this article might not be entirely accurate — I can’t find the corollary for old flexbox (display: box;) for this property. Am I missing something?

  2. Philip

    I also think the support table is a bit weird here. I don’t think Safari supports align-self

  3. Rohit Vaidya
    Permalink to comment#

    Yes, even i faced this. Safari does not support align-self

  4. Permalink to comment#

    Safari supports it on 7.0+ with -webkit-align-self

    http://www.w3schools.com/cssref/css3_pr_align-self.asp

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```