Difference between align-content and align-items
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:
| The align-items property accepts 5 different values:
|
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-container(flex-box) */ .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; } /* flex-start */ .flexStart { align-content: flex-start; } /* flex-end */ .flexEnd { align-content: flex-end; } /* center */ .center { align-content: center; } /* space-between */ .spaceBetween { align-content: space-between; } /* space-around */ .spaceAround { align-content: space-around; } /* stretch */ .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-container(flex-box) */ .flex { background-color: greenyellow; margin:0; padding:0% 2%; float: left; height: 200px; width: 160px; border: 1px solid black; display: flex; flex-direction: row; } /* flex-start */ .flexStart { align-items: flex-start; } /* flex-end */ .flexEnd { align-items: flex-end; } /* center */ .center { align-items: center; } /* baseline */ .baseLine { align-items: baseline; } /* stretch */ .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
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.
