CSS Property align-self
The align-self property is a sub-property of the Flexible Box Layout module.
The align-self property aligns the
the item inside the flexible container.
Summary
- Initial value
- auto
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.alignSelf="center"
- Animatable
- no
CSS Syntax
align-self: auto | flex-start | flex-end | center | baseline | stretch
Property Values
- flex-start
- place item cross-start-margin edge on the cross-start line
- flex-end
- place item cross-end margin edge on the cross-end line
- center
- center item in the cross-axis
- baseline
- align items as their baseline are aligned
- stretch (default)
- stretch to fill the container respecting min-width/max-width
- initial
- sets to default value
- inherit
- Inherits this property from its parent element
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
align-self |
21.0 | 11.0 | 20.0 | 3.1 | 12.1 |
Example
<!DOCTYPE html>
<html>
<style>
.flex-container {<!-- w w w . j av a 2s. co m-->
padding: 0;
margin: 0;
list-style: none;
height: 200px;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.flex-start { -webkit-align-self: flex-start; align-self: flex-start; }
.flex-end { -webkit-align-self: flex-end; align-self: flex-end; }
.center { -webkit-align-self: center; align-self: center; }
.baseline { -webkit-align-self: baseline; align-self: baseline; }
.stretch { -webkit-align-self: stretch; align-self: stretch; }
.flex-item {
background: red;
padding: 5px;
width: 100px;
margin: 5px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item flex-start">1</li>
<li class="flex-item flex-end">2</li>
<li class="flex-item center">3</li>
<li class="flex-item baseline">4</li>
<li class="flex-item stretch">5</li>
</ul>
</body>
</html>