alignItems - Javascript CSS Style Property

Javascript examples for CSS Style Property:alignItems

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

Description

The alignItems property sets the default alignment for elements inside the flexible container.

Property Values

Value Description
stretchDefault. Items are stretched to fit the container
center positioned at the center of the container
flex-start positioned at the beginning of the container
flex-end positioned at the end of the container
baseline positioned at the baseline of the container
initialSets this property to its default value.
inheritInherits this property from its parent element.

Technical Details

Item Value
Default Value: stretch
Return Value: A String, representing the align-items property of an element
CSS VersionCSS3

The following code shows how to Position the alignments for all the items of the flexible <div> element at the beginning of the container:

Demo Code

ResultView the demo in separate window 

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

div#main div {
    -webkit-flex: 1; /* Safari 7.0+ */
    flex: 1;
}
</style>
</head>
<body>

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

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

<script>
function myFunction() {
    document.getElementById("main").style.WebkitAlignItems = "flex-start"; // Code for Safari 7.0+
    document.getElementById("main").style.alignItems = "flex-start";
}
</script>

</body>
</html>

Related Tutorials