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: stretch|center|flex-start|flex-end|baseline|initial| inherit;
Property Value:
stretch: Items are stretched to fit the container and it is the default value.
- Syntax:
align-items: stretch;
- Example:
<!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>
chevron_rightfilter_none - Output:
center: The position of Items shold be center of the container virticaly.
- Syntax:
align-items: center;
- Example:
<!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>
chevron_rightfilter_none - Output:
flex-start: Items will be positioned to the beginning of the container.
- Syntax:
align-items: flex-start;
- Example:
<!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>
chevron_rightfilter_none - Output:
flex-end: Items will be positioned to the end of the container.
- Syntax:
align-items: flex-end;
- Example:
<!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>
chevron_rightfilter_none - Output:
baseline: Items will be positioned to the baseline of the container.
- Syntax:
align-items: baseline;
- Example:
<!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>
chevron_rightfilter_none - Output:
initial: Sets this value/property to its default value.
- Syntax:
align-items: baseline;
- Example:
<!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>
chevron_rightfilter_none - Output:
inherit: Inherit the property from the parent element.
Supported Browsers: The browser supported by CSS align-items property are listed below:
- Google Chrome 21.0
- Internet Explorer 11.0
- Firefox 20.0
- opera 12.1
- Safari 9.0, 7.0 -webkit-