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
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
01 Jun, 2023
Like Article
Save Article