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...