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.