alignSelf Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:alignSelf

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. alignSelf

Description

The alignSelf property sets the alignment for an element inside the flexible container.

The alignSelf property overrides the flexible container's alignItems property.

Property Values

Value Description
auto Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container
stretchpositioned to fit the container
center positioned at the center
flex-start are positioned at the beginning
flex-end positioned at the end
baseline positioned at the baseline
initialSets this property to its default value.
inheritInherits this property from its parent element.

Return Value:

A String, representing the align-self property of an element

The following code shows how to set the alignments for one of the items inside a flexible element to fit the container:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from  w  w w  .  j a  va 2 s  .c o  m
    width: 200px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
}

#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    flex: 1;
}

#myBlueDiv {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("myBlueDiv").style.WebkitAlignSelf = "stretch"; // Code for Safari 7.0+
    document.getElementById("myBlueDiv").style.alignSelf = "stretch";
}
</script>
</body>
</html>

Related Tutorials