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;" >w3wiki</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;" >w3wiki</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;" >w3wiki</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;" >w3wiki</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;" >w3wiki</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;" >w3wiki</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
Contact Us