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


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


Output
Use of align-items property with different values




My Personal Notes arrow_drop_up

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 :

1


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