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