CSS align items

CSS align items is used to define the alignment of box items.

This property aligns each items inside flex container.

Syntax

align-items: enter value for alignment

1	align-items: enter value for alignment

<style>
div.my-container{
display: flex;
align-items: center;
border:1px solid yellow;
border-radius:20px;
padding:10px;
height: 305px;
}
div.my-container div{
width:100%;
padding:2%;
}
.red{
background:red;
}
.blue{
background:blue;
}
.green{
background:green;
}
</style>
<div class="my-container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>

<style>

div.my-container{

display: flex;

align-items: center;

border:1px solid yellow;

border-radius:20px;

padding:10px;

height: 305px;

}

div.my-container div{

width:100%;

padding:2%;

}

.red{

background:red;

}

.blue{

background:blue;

}

.green{

background:green;

}

</style>

</div>

Output

CSS align items values list

Sr. No.	value	Description
1	flex-start	Used to move flex items to the start of block. The value for this is flex-start.
2	flex-end	Used to move flex items to the end of block. The value for this is flex-end.
3	center	Used to move flex items to the center of block. The value for this is center.
4	stretch	Used to stretch the flex items to fit the block. The value for this is stretch.
5	initial	Used to define as the property initial value.
6	inherit	Used to define the computed value of property on the elements parent.
7	unset	Used to define the property either acts as inherit or initial, depending on the property if it is inherited or not.

CSS Property

CSS align items

Syntax

CSS align items values list

Related Posts: