The CSS align-items property is used to specify the default alignment for items inside the flex box. It is one of the CSS3 properties.
- The available values for the align-items property are as follows.
- flex-start
- center
- flex-end
- baseline
- stretch
Syntax:
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
Values:
| Value | Description |
|---|---|
| stretch | This is the default value of an align-items property. It makes items fit into the container. |
| center | It will place the items at the center of the container. |
| flex-start | This property will place the items at the beginning of the container. |
| flex-end | It helps to place the items at the end of the container. |
| baseline | This value can make items that are positioned at the baseline of the container. |
| initial | This will make the property use its default value. |
| inherit | It can inherit the property from its parent element. |
Align-items Property with “Stretch” Value:
The following code uses align-items property with stretch value.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex;
-webkit-align-items: stretch;
display: flex;
align-items: stretch;
}
#example li {
-webkit-flex: 1;
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: stretch</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>
Result:
From the above code, we can get the result as given in the below image.
Align-items Property with “Center” Value:
In the following code, you can see the align-items property with center value.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
}
#example li {
-webkit-flex: 1;
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: center</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>
Result:
By running the above code, we will get the output as shown in the below image.
Align-items Property with “flex-start” value:
The following code used the align-items property with flex-start value.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#example li {
-webkit-flex: 1;
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-start</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>
Result:
In this example, the items are placed at the beginning.
Align-items Property with the “flex-end” value:
Here, we apply the flex-end value, so it will align-items at the end of the flex box.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex;
-webkit-align-items: flex-end;
display: flex;
align-items: flex-end;
}
#example li {
-webkit-flex: 1;
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-end</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>
Result:
Let’s see the result in the following image. There you can see that all the items are aligned at the end of the container.
Align-items Property with the “baseline” value:
This is the last example with baseline value. It will place the items at the baseline of the container.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex;
-webkit-align-items: baseline;
display: flex;
align-items: baseline;
}
#example li {
-webkit-flex: 1;
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: baseline</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>
Result:
After executing the above code, you will get the result as shown in the below screenshot.
Browser-Support
The post CSS align-items Property appeared first on Share Point Anchor.
Top comments (0)