HTML | DOM Style alignItems Property
Last Updated :
10 Aug, 2022
The DOM Style alignItems Property is used to set or return the default alignment of items in a flexible container.
Syntax:
- To get the alignItems Property
object.style.alignItems
- To set the alignItems Property
object.style.alignItems = "stretch|center|flex-start|flex-end|
baseline|initial|inherit"
Property Values:
- stretch: This is used to stretch the items to fit the container. This is the default value.
- center: This is used to center the items in the container.
- flex-start: This is used to position the items at the beginning of the container.
- flex-end: This is used to position the items at the end of the container.
- baseline: This is used to position the items at the baseline of the container.
- initial: This is used to set this property to its default value.
- inherit: This inherits the property from its parent.
Return Values: It returns a string value, which representing the align-items property of an element.
The values are explained using the following examples:
Example-1: Using the stretch value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
/* setting align-items to center to observe the
effect of the stretch value */
align-items: center;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'stretch'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to stretch
elem.style.alignItems = 'stretch';
}
</script>
</body>
</html>
|
Output:
- Before pressing the button:
- After pressing the button:
Example-2: Using the center value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'center'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to center
elem.style.alignItems = 'center';
}
</script>
</body>
</html>
|
Output:
- Before pressing the button:
- After pressing the button:
Example-3: Using the flex-start value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'flex-start'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to flex-start
elem.style.alignItems = 'flex-start';
}
</script>
</body>
</html>
|
Output:
- Before pressing the button:
- After pressing the button:
Example-4: Using the flex-end value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'flex-end'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to flex-end
elem.style.alignItems = 'flex-end';
}
</script>
</body>
</html>
|
Output:
- Before pressing the button:
- After pressing the button:
Example-5: Using the baseline value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'baseline'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to baseline
elem.style.alignItems = 'baseline';
}
</script>
</body>
</html>
|
Output:
- Before pressing the button:
- After pressing the button:
Example-6: Using the initial value. This sets the property to the default value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
/* setting align-items to center
to observe the effect of the
initial value */
align-items: center;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'initial'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to initial
elem.style.alignItems = 'initial';
}
</script>
</body>
</html>
|
Output:
- Before pressing the button:
- After pressing the button:
Example-7: Using the inherit value. This inherits the position from its parent element.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
#parent {
/* Setting the parent div's
align-items to flex-end */
align-items: flex-end;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'inherit'</p>
<div id="parent">
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to inherit from parent div
elem.style.alignItems = 'inherit';
}
</script>
</body>
</html>
|
Output:
- Before pressing the button:
- After pressing the button:
Supported Browsers: The browser supported by alignItems Property are listed below:
- Chrome 29.0 and above
- Edge 12.0 and above
- Internet Explorer 11.0 and above
- Firefox 20.0 and above
- Opera 12.1 and above
- Safari 9.0 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...