The DOM Style alignSelf property is used to set or return the alignment for a selected item inside a flexible container.
Syntax:
- To get the alignSelf Property
object.style.alignSelf
- To set the alignSelf Property
object.style.alignSelf = "auto | stretch | center | flex-start | flex-end | baseline | initial | inherit"
Property Values:
- auto: The element inherits the parent container’s ‘align-items’ property or sets it to ‘stretch’ if it has no parent container. This is the default style.
- stretch: This is used to stretch the item to fit the container.
- center: This is used to center the item in the container.
- flex-start: This is used to position the item at the beginning of the container
- flex-end: This is used to position the item at the end of the container.
- baseline: This is used to position the item 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-self property of an element.
Example-1: Using the auto value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignSelf Property
</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
align-items: center;
}
#item {
/* setting align-self to
flex-end to observe the
effect of the auto value */
align-self: flex-end;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks
</h1>
<b>DOM Style alignSelf Property</b>
<p>Click on the button to change the alignSelf
property to 'auto'</p>
<div class="main">
<div style="background-color:green;">
GFG1 </div>
<div style="background-color:white;">
GFG2 </div>
<div id="item" style="background-color:green;">
GFG3 </div>
<div style="background-color:white;">
GFG4 </div>
</div>
<button onclick="changePos()">
Change alignSelf property</button>
<script>
function changePos() {
elem = document.querySelector('#item');
// Setting alignSelf to auto
elem.style.alignSelf = 'auto';
}
</script>
</body>
</html>
Output:
- Before clicking the button:
- After clicking the button:
Example-2: Using the stretch value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignSelf Property
</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
/* setting align-items to
center to observe the
effect of the strench value */
align-items: center;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignSelf Property</b>
<p>Click on the button to change the
alignSelf property to 'stretch'</p>
<div class="main">
<div style="background-color:green;">
GFG1 </div>
<div style="background-color:white;">
GFG2 </div>
<div id="item"
style="background-color:green;">
GFG3 </div>
<div style="background-color:white;">
GFG4 </div>
</div>
<button onclick="changePos()">Change alignSelf property
</button>
<script>
function changePos() {
elem = document.querySelector('#item');
// Setting alignSelf to stretch
elem.style.alignSelf = 'stretch';
}
</script>
</body>
</html>
Output:
- Before clicking the button:
- After clicking the button:
Example-3: Using the center value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignSelf Property
</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
/* setting align-items to
center to observe the
effect of the center value */
align-items: stretch;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks
</h1>
<b>DOM Style alignSelf Property</b>
<p>Click on the button to change the
alignSelf property to 'center'</p>
<div class="main">
<div style="background-color:green;">
GFG1 </div>
<div style="background-color:white;">
GFG2 </div>
<div id="item"
style="background-color:green;">
GFG3 </div>
<div style="background-color:white;">
GFG4 </div>
</div>
<button onclick="changePos()">
Change alignSelf property</button>
<script>
function changePos() {
elem = document.querySelector('#item');
// Setting alignSelf to center
elem.style.alignSelf = 'center';
}
</script>
</body>
</html>
Output:
- Before clicking the button:
- After clicking the button:
Example-4: Using the flex-start value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignSelf Property
</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks
</h1>
<b>DOM Style alignSelf Property</b>
<p>Click on the button to change the
alignSelf property to 'flex-start'</p>
<div class="main">
<div style="background-color:green;">
GFG1 </div>
<div style="background-color:white;">
GFG2 </div>
<div id="item"
style="background-color:green;">
GFG3 </div>
<div style="background-color:white;">
GFG4 </div>
</div>
<button onclick="changePos()">
Change alignSelf property</button>
<script>
function changePos() {
elem = document.querySelector('#item');
// Setting alignSelf to flex-start
elem.style.alignSelf = 'flex-start';
}
</script>
</body>
</html>
Output:
- Before clicking the button:
- After clicking the button:
Example-5: Using the flex-end value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignSelf Property
</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks
</h1>
<b>DOM Style alignSelf Property</b>
<p>Click on the button to change the
alignSelf property to 'flex-end'</p>
<div class="main">
<div style="background-color:green;">
GFG1 </div>
<div style="background-color:white;">
GFG2 </div>
<div id="item"
style="background-color:green;">
GFG3 </div>
<div style="background-color:white;">
GFG4 </div>
</div>
<button onclick="changePos()">
Change alignSelf property</button>
<script>
function changePos() {
elem = document.querySelector('#item');
// Setting alignSelf to flex-end
elem.style.alignSelf = 'flex-end';
}
</script>
</body>
</html>
Output:
- Before clicking the button:
- After clicking the button:
Example-6: Using the baseline value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignSelf Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks
</h1>
<b>DOM Style alignSelf Property</b>
<p>Click on the button to change the
alignSelf property to 'baseline'</p>
<div class="main">
<div style="background-color:green;">
GFG1 </div>
<div style="background-color:white;">
GFG2 </div>
<div id="item"
style="background-color:green;">
GFG3 </div>
<div style="background-color:white;">
GFG4 </div>
</div>
<button onclick="changePos()">
Change alignSelf property</button>
<script>
function changePos() {
elem = document.querySelector('#item');
// Setting alignSelf to baseline
elem.style.alignSelf = 'baseline';
}
</script>
</body>
</html>
Output:
- Before clicking the button:
- After clicking the button:
Example-7: Using the initial value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignSelf Property
</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
align-items: center;
}
#item {
/* setting align-self to
flex-end to observe the
effect of the initial value */
align-self: flex-end;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks
</h1>
<b>DOM Style alignSelf Property</b>
<p>Click on the button to change the
alignSelf property to 'initial'</p>
<div class="main">
<div style="background-color:green;">
GFG1 </div>
<div style="background-color:white;">
GFG2 </div>
<div id="item"
style="background-color:green;">
GFG3 </div>
<div style="background-color:white;">
GFG4 </div>
</div>
<button onclick="changePos()">
Change alignSelf property</button>
<script>
function changePos() {
elem = document.querySelector('#item');
// Setting alignSelf to initial
elem.style.alignSelf = 'initial';
}
</script>
</body>
</html>
Output:
- Before clicking the button:
- After clicking the button:
Example-8: Using the inherit value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignSelf Property
</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
/* this itself is the
parent of the item */
align-items: center;
}
#item {
/* setting align-self to
flex-end to observe the
effect of the inherit value */
align-self: flex-end;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks
</h1>
<b>DOM Style alignSelf Property</b>
<p>Click on the button to change the
alignSelf property to 'inherit'</p>
<div id="parent">
<div class="main">
<div style="background-color:green;">
GFG1 </div>
<div style="background-color:white;">
GFG2 </div>
<div id="item"
style="background-color:green;">
GFG3 </div>
<div style="background-color:white;">
GFG4 </div>
</div>
</div>
<button onclick="changePos()">
Change alignSelf property</button>
<script>
function changePos() {
elem = document.querySelector('#item');
// Setting alignSelf to inherit
elem.style.alignSelf = 'inherit';
}
</script>
</body>
</html>
Output:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by alignSelf property are listed below:
- Google Chrome 29.0 and above
- Edge 12.0 and above
- Internet Explorer 10.0 and above
- Firefox 20.0 and above
- Opera 12.1 and above
- Safari 9.0 and above
