The align-self property in CSS is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc.
Syntax:
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial;
auto: This property is used to inherits its parent container align-items property or stretched if it has no parent container. It is a default value.
Example:
<!DOCTYPE html> < html > < head > < style > #geeks { width: 250px; height: 200px; border: 4px solid black; display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; } #geeks div { -webkit-flex: 2; flex: 1; } #sudo { -webkit-align-self: auto; align-self: auto; } </ style > </ head > < body > < center > < h2 style = "color:green;" >GeeksForGeeks</ h2 > < h3 style = "color:green;" >align-self:auto;</ h3 > < div id = "geeks" > < div style = "background-color:green;color:white;" >Geeks</ div > < div style = "background-color:lightblue;" id = "sudo" >For</ div > < div style = "background-color:coral;" >Geeks</ div > < div style = "background-color:lightblue;" >Sudo</ div > < div style = "background-color:tomato;" >Placement</ div > </ div > </ center > </ body > </ html > |
Output:
stretch: This property is used to positioned the elements to fit the container.
Example:
<!DOCTYPE html> < html > < head > < style > #geeks{ width: 250px; height: 200px; border: 4px solid black; display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; } #geeks div{ -webkit-flex: 2; flex: 1; } #sudo { -webkit-align-self: stretch; align-self: stretch; } </ style > </ head > < body > < center > < h2 style = "color:green;" >GeeksForGeeks</ h2 > < h3 style = "color:green;" >align-self:stretch;</ h3 > < div id = "geeks" > < div style = "background-color:green;color:white;" >Geeks</ div > < div style = "background-color:lightblue;" id = "sudo" >For</ div > < div style = "background-color:coral;" >Geeks</ div > < div style = "background-color:lightblue;" >Sudo</ div > < div style = "background-color:tomato;" >Placement</ div > </ div > </ center > </ body > </ html > |
Output:
Center: This Property is used to place the item at the center of the flexible container.
Example:
<!DOCTYPE html> < html > < head > < style > #geeks { width: 250px; height: 200px; border: 4px solid black; display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; } #geeks div { -webkit-flex: 1; flex: 1; } #sudo { -webkit-align-self: center; align-self: center; } </ style > </ head > < body > < center > < h2 style = "color:green;" >GeeksForGeeks</ h2 > < h3 style = "color:green;" >align-self:center;</ h3 > < div id = "geeks" > < div style = "background-color:green;color:white;" >Geeks</ div > < div style = "background-color:lightblue;" id = "sudo" >For</ div > < div style = "background-color:coral;" >Geeks</ div > < div style = "background-color:lightblue;" >Sudo</ div > < div style = "background-color:tomato;" >Placement</ div > </ div > </ center > </ body > </ html > |
Output:
flex-start: This property is used to align the selected item at the beginning of the flexible container.
Example:
<!DOCTYPE html> < html > < head > < style > #geeks { width: 250px; height: 200px; border: 4px solid black; display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; } #geeks div { -webkit-flex: 1; flex: 1; } #sudo { -webkit-align-self:flex-start; align-self: flex-start; } </ style > </ head > < body > < center > < h2 style = "color:green;" >GeeksForGeeks</ h2 > < h3 style = "color:green;" >align-self:flex-start;</ h3 > < div id = "geeks" > < div style = "background-color:green;color:white;" >Geeks</ div > < div style = "background-color:lightblue;" id = "sudo" >For</ div > < div style = "background-color:coral;" >Geeks</ div > < div style = "background-color:lightblue;" >Sudo</ div > < div style = "background-color:tomato;" >Placement</ div > </ div > </ center > </ body > </ html > |
Output:
flex-end: This Property is used to position the selected item at the end of the flexible container.
Example:
<!DOCTYPE html> < html > < head > < style > #geeks{ width: 250px; height: 200px; border: 4px solid black; display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; } #geeks div{ -webkit-flex: 1; flex: 1; } #sudo { -webkit-align-self:flex-end; align-self: flex-end; } </ style > </ head > < body > < center > < h2 style = "color:green;" >GeeksForGeeks</ h2 > < h3 style = "color:green;" >align-self:flex-end;</ h3 > < div id = "geeks" > < div style = "background-color:green;color:white;" >Geeks</ div > < div style = "background-color:lightblue;" id = "sudo" >For</ div > < div style = "background-color:coral;" >Geeks</ div > < div style = "background-color:lightblue;" >Sudo</ div > < div style = "background-color:tomato;" >Placement</ div > </ div > </ center > </ body > </ html > |
Output:
Baseline: The item is placed at the baseline of the flexible container.
Example:
<!DOCTYPE html> < html > < head > < style > #geeks{ width: 250px; height: 200px; border: 4px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items: center; } #geeks div{ -webkit-flex: 1; /* Safari 6.1+ */ flex: 1; } #sudo { -webkit-align-self:baseline; /* Safari 7.0+ */ align-self: baseline; } </ style > </ head > < body > < center > < h2 style = "color:green;" >GeeksForGeeks</ h2 > < h3 style = "color:green;" >align-self:baseline;</ h3 > < div id = "geeks" > < div style = "background-color:green;color:white;" >Geeks</ div > < div style = "background-color:lightblue;" id = "sudo" >For</ div > < div style = "background-color:coral;" >Geeks</ div > < div style = "background-color:lightblue;" >Sudo</ div > < div style = "background-color:tomato;" >Placement</ div > </ div > </ center > </ body > </ html > |
Output:
initial: It sets the property to its normal position. It is the default value.
Example:
<!DOCTYPE html> < html > < head > < style > #geeks{ width: 250px; height: 200px; border: 4px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: flex-start; /* Safari 7.0+ */ display: flex; align-items: flex-start; } #geeks div{ -webkit-flex: 1; /* Safari 6.1+ */ flex: 1; } #sudo { -webkit-align-self:initial; /* Safari 7.0+ */ align-self: initial; } </ style > </ head > < body > < center > < h2 style = "color:green;" >GeeksForGeeks</ h2 > < h3 style = "color:green;" >align-self:initial;</ h3 > < div id = "geeks" > < div style = "background-color:green;color:white;" >Geeks</ div > < div style = "background-color:lightblue;" id = "sudo" >For</ div > < div style = "background-color:coral;" >Geeks</ div > < div style = "background-color:lightblue;" >Sudo</ div > < div style = "background-color:tomato;" >Placement</ div > </ div > </ center > </ body > </ html > |
Output:
`
leave a comment
0 Comments