HTML | DOM Style alignSelf Property
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.
html
<!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.
html
<!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.
html
<!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.
html
<!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.
html
<!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.
html
<!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.
html
<!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.
html
<!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
Please Login to comment...