CSS align-self – override align-items for flex-item

CSS align-self property can be used to override align-items value (defined at flexbox level) for a specific flex-item.

Syntax:

.someflexcontainer {
  display: flex;
  align-items: flex-start;
}
.flexitem {
  /* Override align-items for a specific flex-item */
  align-self: flex-end;
}

CSS property align-self

CSS version: CSS 3
Value: auto | flex-start | flex-end | center | baseline | stretch
Initial: auto
Applies to: flex items
Inherited: no

flexbox-self-align

Example – align-self

This example uses align-items = flex-start. For one specific flex-item (last one) we override align-self to flex-end.

<style>
.fbox {
  display: flex;
  align-items: flex-start;
  width: 200px; background-color:gray;
}
.child {
  background-color:green;
  border: 1px solid black; padding: 5px;
}
</style>

<div class=fbox>
<div style="font-size:30px;" class="child">div1</div>
<div class="child">div2 longer text</div>
<div class="child">div3</div>
<div style="align-self:flex-end;" class="child">div4</div>
</div>
refresh

Specification and Browser compatibility

SpecificationStatusCategories
Flexible Box Layout ModuleW3C Working DraftCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments