CSS | align-self Property
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;
Property values: 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.
- Syntax:
align-self: auto;
- Example:
html
<!DOCTYPE html> < html > < head > < title > CSS | align-self Property </ title > < 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.
- Syntax:
align-self: stretch;
- Example:
html
<!DOCTYPE html> < html > < head > < title > CSS | align-self Property </ title > < 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.
- Syntax:
align-self: center;
- Example:
html
<!DOCTYPE html> < html > < head > < title > CSS | align-self Property </ title > < 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:
- Syntax:
align-self: flex-start;
- Example:
html
<!DOCTYPE html> < html > < head > < title > CSS | align-self Property </ title > < 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.
- Syntax:
align-self: flex-end;
- Example:
html
<!DOCTYPE html> < html > < head > < title > CSS | align-self Property </ title > < 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.
- Syntax:
align-self: baseline;
- Example:
html
<!DOCTYPE html> < html > < head > < title > CSS | align-self Property </ title > < 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.
- Syntax:
align-self: initial;
- Example:
html
<!DOCTYPE html> < html > < head > < title > CSS | align-self Property </ title > < 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:
Supported browsers: The browser supported by CSS | align-self Property are listed below:
- Google Chrome 21.0
- Internet Explorer 11.0
- Firefox 28.0
- Opera 12.1
- Safari 9.0, 7.0 -webkit-