Difference between align-content and align-items
Last Updated :
14 Aug, 2020
Both align-content and align-items function on the cross-axis.Cross-axis in flexbox is dependent on the flex-direction and runs perpendicular to the main-axis, if flex-direction is either row or row-reverse then the cross-axis is vertical, if flex-direction is either column or column-reverse then the cross-axis is horizontal.
align-content |
align-items |
This property of flex-box aligns flex-lines with respect to each other along the cross-axis. |
This property of flex-box aligns the flex-items within flex-line along the cross-axis |
This property works only when the “flex-wrap:” property is set to wrap |
This property works even when the “flex-wrap:” property is not set to wrap |
This property has no effect when the number of flex-line is 1. |
This property does not depend on the number of flex-lines. |
The align-content property accepts 6 different values:
- flex-start:lines packed to the start of the container
- flex-end:lines packed to the end of the container
- center:lines packed to the center of the container
- space-between:lines evenly distributed; the first line is at the start of the container while the last one is at the end
- space-around:lines evenly distributed with equal space between
- stretch(Default):lines stretch to take up the remaining space
|
The align-items property accepts 5 different values:
- flex-start:cross-start margin edge of the items is placed on the cross-start line
- flex-end:cross-end margin edge of the items is placed on the cross-end line
- center:items are centered in the cross-axis
- baseline:items are aligned such as their baselines align
- stretch(Default):stretch to fill the container
|
Syntax:
-
align-content:
element{
align-content:stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
// CSS Property
}
-
align-items:
element{
align-items:stretch | center | flex-start | flex-end | baseline | initial | inherit;
// CSS Property
}
Example for align-content
<!DOCTYPE html>
<html lang= "en" >
<head>
<title>Align-content</title>
<style>
.flex {
background-color : greenyellow;
margin : 2% 2% ;
padding : 0% 3% ;
float : left ;
height : 500px ;
width : 50px ;
border : 1px solid black ;
display : flex;
flex-wrap: wrap;
flex- direction : row;
}
.flexStart {
align- content : flex-start;
}
.flexEnd {
align- content : flex-end;
}
. center {
align- content : center ;
}
.spaceBetween {
align- content : space-between;
}
.spaceAround {
align- content : space-around;
}
.stretch {
align- content : stretch;
}
ul {
list-style : none ;
}
.flex-item {
background : green ;
padding : 5px ;
width : 50px ;
margin : 5px ;
line-height : 10px ;
color : white ;
font-weight : bold ;
}
</style>
</head>
<body>
<ul class= "flex flexStart" >
<li class= "flex-item" >
<p>F</p>
</li>
<li class= "flex-item" >
<p>LE</p>
</li>
<li class= "flex-item" >
<p>X</p>
</li>
<li class= "flex-item" >
<p>ST</p>
</li>
<li class= "flex-item" >
<p>A</p>
</li>
<li class= "flex-item" >
<p>RT</p>
</li>
</ul>
<ul class= "flex flexEnd" >
<li class= "flex-item" >
<p>F</p>
</li>
<li class= "flex-item" >
<p>LE</p>
</li>
<li class= "flex-item" >
<p>X</p>
</li>
<li class= "flex-item" >
<p>E</p>
</li>
<li class= "flex-item" >
<p>N</p>
</li>
<li class= "flex-item" >
<p>D</p>
</li>
</ul>
<ul class= "flex center" >
<li class= "flex-item" >
<p>C</p>
</li>
<li class= "flex-item" >
<p>E</p>
</li>
<li class= "flex-item" >
<p>N</p>
</li>
<li class= "flex-item" >
<p>T</p>
</li>
<li class= "flex-item" >
<p>E</p>
</li>
<li class= "flex-item" >
<p>R</p>
</li>
</ul>
<ul class= "flex spaceBetween" >
<li class= "flex-item" >
<p>SP</p>
</li>
<li class= "flex-item" >
<p>AC</p>
</li>
<li class= "flex-item" >
<p>EB</p>
</li>
<li class= "flex-item" >
<p>ET</p>
</li>
<li class= "flex-item" >
<p>WE</p>
</li>
<li class= "flex-item" >
<p>EN</p>
</li>
</ul>
<ul class= "flex spaceAround" >
<li class= "flex-item" >
<p>SP</p>
</li>
<li class= "flex-item" >
<p>AC</p>
</li>
<li class= "flex-item" >
<p>E</p>
</li>
<li class= "flex-item" >
<p>AR</p>
</li>
<li class= "flex-item" >
<p>OU</p>
</li>
<li class= "flex-item" >
<p>ND</p>
</li>
</ul>
<ul class= "flex stretch" >
<li class= "flex-item" >
<p>S</p>
</li>
<li class= "flex-item" >
<p>T</p>
</li>
<li class= "flex-item" >
<p>R</p>
</li>
<li class= "flex-item" >
<p>E</p>
</li>
<li class= "flex-item" >
<p>T</p>
</li>
<li class= "flex-item" >
<p>CH</p>
</li>
</ul>
</body>
</html>
|
Output
Example for align-items
<!DOCTYPE html>
<html lang= "en" >
<head>
<title>Align-items</title>
<style>
.flex {
background-color : greenyellow;
margin : 0 ;
padding : 0% 2% ;
float : left ;
height : 200px ;
width : 160px ;
border : 1px solid black ;
display : flex;
flex- direction : row;
}
.flexStart {
align-items: flex-start;
}
.flexEnd {
align-items: flex-end;
}
. center {
align-items: center ;
}
.baseLine {
align-items: baseline ;
}
.stretch {
align-items: stretch;
}
ul {
list-style : none ;
}
.flex-item {
background : green ;
padding : 0px ;
width : 40px ;
margin : 0px ;
line-height : 10px ;
color : white ;
font-weight : bold ;
text-align : center ;
}
</style>
</head>
<body>
<ul class= "flex flexStart" >
<li class= "flex-item" >
<p>F</p><br>
<p>LE</p>
</li>
<li class= "flex-item" >
<p>X</p>
</li>
<li class= "flex-item" >
<p>ST</p><br>
<p>A</p>
</li>
<li class= "flex-item" >
<p>RT</p>
</li>
</ul>
<ul class= "flex flexEnd" >
<li class= "flex-item" >
<p>F</p><br>
<p>LE</p>
</li>
<li class= "flex-item" >
<p>X</p>
</li>
<li class= "flex-item" >
<p>E</p><br>
<p>N</p>
</li>
<li class= "flex-item" >
<p>D</p>
</li>
</ul>
<ul class= "flex center" >
<li class= "flex-item" >
<p>C</p><br>
<p>E</p>
</li>
<li class= "flex-item" >
<p>N</p>
</li>
<li class= "flex-item" >
<p>T</p><br>
<p>E</p>
</li>
<li class= "flex-item" >
<p>R</p>
</li>
</ul>
<ul class= "flex baseLine" >
<li class= "flex-item" >
<p>BA</p><br>
<p>S</p>
</li>
<li class= "flex-item" >
<p>E</p>
</li>
<li class= "flex-item" >
<p>LI</p><br>
<p>N</p>
</li>
<li class= "flex-item" >
<p>E</p>
</li>
</ul>
<ul class= "flex stretch" >
<li class= "flex-item" >
<p>S</p><br>
<p>T</p>
</li>
<li class= "flex-item" >
<p>R</p>
</li>
<li class= "flex-item" >
<p>E</p><br>
<p>T</p>
</li>
<li class= "flex-item" >
<p>CH</p>
</li>
</ul>
</body>
</html>
|
Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...