Javascript Reference - HTML DOM Style alignSelf Property

The alignSelf property gets and sets the alignment for the selected item inside the flexible container.

Browser Support


`alignSelf`	Yes	11	Yes	No	Yes

Syntax

Return the alignSelf property:

var v = object.style.alignSelf;

Set the alignSelf property:

object.style.alignSelf='auto|stretch|center|flex-start|flex-end|baseline|initial|inherit'

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

Technical Details

Default Value:	auto
Return Value:	A string representing the align-self property
CSS Version	CSS3

Example

The following code shows how to center the one of the items inside a flexible element.


<!DOCTYPE html>
<html>
<head>
<style> 
#main {<!--from w  ww  .j  av a2 s.c  o m-->
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    align-items: flex-start;
}

#main div {
    flex: 1;
}

#myBlueDiv {
    align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:red;">RED</div>
  <div style="background-color:blue;" id="myBlueDiv">BLUE</div>  
  <div style="background-color:green;">Green.</div>
</div>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myBlueDiv").style.alignSelf = "stretch";
}
</script>
</body>
</html>

The code above is rendered as follows: