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:

  • 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right






                        filter_none








Output

Use of align-content property with different values


Example for align-items











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















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



















                        chevron_right







                        filter_none








Output

Use of align-items property with different values





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
ks99737
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.


					
		

    Article Tags : 
CSS
Web Technologies

           	
        

         

         
 
                1

                

        



        
        
        
        
        

    

            

            0
            

            

                             No votes yet.
                    

            
            
            
            
            
        

        
        

        

        

        

        

        

        


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.