HTML | DOM Style alignItems Property
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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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