Difference between align-content and align-items - GeeksforGeeks

14 Aug, 2020
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.
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
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}
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}
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
CSS-Misc
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript