Home »
CSS
CSS align-items Property
Learn about the CSS align-items property, its usages, syntax and examples.
Submitted by Shahnail Khan, on April 02, 2022
The introduction of CSS Flexbox proved to be efficient for web developers in making responsive layout structures without using float. There are 6 different flex container properties, namely, flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content, which serve different purposes. In this tutorial, we'll specifically deal with the align-items property.
What is CSS align-items Property?
The align-items property is one of the CSS flex container properties which specifies the proper arrangement of items inside the flex container on the Cross Axis. Its default value is stretch. This property accepts only pre-defined keyword values.
Syntax:
align-items: stretch| flex-start| flex-end| center| baseline| initial| inherit
Quick overview of the syntax used,
| Value |
Explanation |
| baseline |
Alignment of items at the baseline of container. |
| center |
Alignment of items at the center of the container. |
| flex-end |
Alignments of items at the bottom of the container. |
| flex-start |
Alignment of items at the top of the container. |
| stretch |
Default value. Flex items fit in the container. |
The example given below illustrates CSS align-items Property
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items</title>
</head>
<style>
.container{
background-color: teal;
font-size: x-large;
height: 50px;
display: flex;
align-items: flex-start;
width: 30em;
}
a{
color: black;
margin-right: 20px;
}
</style>
<body>
<nav class="container">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#"> Contact</a>
</nav>
</body>
</html>
Output:
We have created a navbar. The CSS align-items property is applied to all the navbar elements. Since the property value is set to "flex-start", all the items in the container class are positioned at the beginning of the container.
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items</title>
</head>
<style>
.Image{
background-color: teal;
height: 250px;
display: flex;
align-items: center;
}
</style>
<body>
<div class="Image">
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/180/409/small/software_enginner_1-01.png" >
</div>
</body>
</html>
Output:
We have inserted an image. The align-items property is applied to the Image class. Since the property value is set to "center", the image is positioned at the center of the container.
CSS Tutorial & Examples »