CSS | align-items Property
The align-items property is used to set the alignment of items inside the flexible container or in the given window. It aligns the Flex Items across the axis. The align-self property is used to override the align-items property.
Syntax:
align-items: normal|start|end|self-start|self-end
|baseline, first baseline, last baseline|stretch
|center|flex-start|flex-end|baseline|safe|unsafe
|initial|inherit;Default Value
- stretch
Property Value: stretch: Items are stretched to fit the container and it is the default value.
Syntax:
align-items: stretch;
Example:
javascript
<!DOCTYPE html><html><head> <title> CSS | align-items Property </title> <style> #stretch { width: 320px; height: 200px; border: 2px solid black; display: flex; align-items: stretch; } </style></head><body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <div id="stretch"> <div style="background-color:Purple;"> Purple </div> <div style="background-color:Yellow;"> Yellow </div> </div> </center></body></html> |
Output:
center: The position of Items should be center of the container vertically.
Syntax:
align-items: center;
Example:
javascript
<!DOCTYPE html><html><head> <title> CSS | align-items Property </title> <style> #center { width: 320px; height: 200px; border: 2px solid black; display: flex; align-items: center; } </style></head><body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <div id="center"> <div style="background-color:Purple;"> Purple </div> <div style="background-color:Yellow;"> Yellow </div> </div> </center></body></html> |
Output:
flex-start: Items will be positioned to the beginning of the container.
Syntax:
align-items: flex-start;
Example:
javascript
<!DOCTYPE html><html><head> <title> CSS | align-items Property </title> <style> #flex-start { width: 320px; height: 200px; border: 2px solid black; display: flex; align-items: flex-start; } </style></head><body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <div id="flex-start"> <div style="background-color:Purple;"> Purple </div> <div style="background-color:Yellow;"> Yellow </div> </div> </center></body></html> |
Output:
flex-end: Items will be positioned to the end of the container.
Syntax:
align-items: flex-end;
Example:
javascript
<!DOCTYPE html><html><head> <title> CSS | align-items Property </title> <style> #flex-end { width: 320px; height: 200px; border: 2px solid black; display: flex; align-items: flex-end; } </style></head><body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <div id="flex-end"> <div style="background-color:Purple;"> Purple </div> <div style="background-color:Yellow;"> Yellow </div> </div> </center></body></html> |
Output:
baseline: Items will be positioned to the baseline of the container.
Syntax:
align-items: baseline;
Example:
javascript
<!DOCTYPE html><html><head> <title> CSS | align-items Property </title> <style> #baseline { width: 320px; height: 200px; border: 2px solid black; display: flex; align-items: baseline; } </style></head><body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <div id="baseline"> <div style="background-color:Purple;"> Purple </div> <div style="background-color:Yellow;"> Yellow </div> </div> </center></body></html> |
Output:
initial: Sets this value/property to its default value.
Syntax:
align-items: initial;
Example:
javascript
<!DOCTYPE html><html><head> <title> CSS | align-items Property </title> <style> #initial { width: 320px; height: 200px; border: 2px solid black; display: flex; align-items: initial; } </style></head><body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <div id="initial"> <div style="background-color:Purple;"> Purple </div> <div style="background-color:Yellow;"> Yellow </div> </div> </center></body></html> |
Output:
inherit: Inherit the property from the parent element.
Supported Browsers: The browser supported by CSS align-items property are listed below:
- Google 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
.png)
