Skip to content
Related Articles

Related Articles

Difference between align-content and align-items
  • Difficulty Level : Easy
  • Last Updated : 14 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

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-contentalign-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 wrapThis 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




<!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
Use of align-content property with different values

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
Use of align-items property with different values

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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :