The HTML DOM Style alignItems property is used for mentioning the items default alignment that are present inside a flexible container.
Syntax
Following is the syntax for −
Setting the alignItems property −
object.style.alignContent = " stretch|center|flex-start|flex-end|baseline|initial|inherit"
Values
Following can be the values −
| Value | Description |
|---|---|
| Stretch | It is the default value and used to stretch the items to fit the container. |
| Center | This is used for positioning the items at the center of the container. |
| flex-start | To position items at the beginning of the container. |
| flex-end | To position the items at the end of the container. |
| baseline | To position the items at the container baseline |
| initial | For setting this property to initial value. |
| Inherit | To inherit the parent property value. |
Example
Let us look at the example for the Style alignItems property −
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 180px;
height: 220px;
padding: 10px;
border: 1px solid #333;
display: flex;
align-items:flex-end;
flex-flow: row wrap;
}
.ele {
width: 60px;
height: 60px;
background-color: skyblue;
}
.ele:nth-child(2n) {
background-color: orange;
}
</style>
<script>
function changeAlign(){
document.getElementById("container").style.alignItems="baseline";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>Change the align items property of the above div by clicking the button</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE button −
