Javascript Reference - HTML DOM Style alignItems Property








The alignItems property gets and sets the default alignment for items inside the flexible container.

Browser Support

Style alignItems Yes 11 Yes No Yes

Syntax

Return the alignItems property:

var v = object.style.alignItems;

Set the alignItems property:

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

Property Values

stretch
Default. stretch elements to fit the container
center
center elements inside the container
flex-start
position elements at the beginning of the container
flex-end
position elements at the end of the container
baseline
position elements at the baseline of the container
initial
sets to default value
inherit
Inherits this property from its parent element




Technical Details

Default Value: stretch
Return Value: A string representing the align-items property
CSS Version CSS3

Example

The following code shows how to center the flexible items.


<!DOCTYPE html>
<html>
<head>
<style> 
div#main {<!--   www .j a va 2s.c o  m-->
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    align-items: center;
}

div#main div {
    flex: 1;
}
</style>
</head>
<body>

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

The code above is rendered as follows: