HTML Style Align Items Property

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: