Skip to content
Related Articles

Related Articles

Table of Contents

Improve Article
Save Article
Like Article

Difference between align-content and align-items

  • Difficulty Level : Easy
  • Last Updated : 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.

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



My Personal Notes
arrow_drop_up
Next

HTML | <img> align Attribute
Recommended Articles
Page :
HTML | DOM Style alignContent Property
11, Mar 19
HTML | DOM Style alignItems Property
22, Jan 19
React Native Flexbox alignItems Property
23, May 21
Difference between node.js require and ES6 import and export
26, Mar 20
Difference Between Store‑and‑Forward Switching and Cut‑Through Switching
22, Nov 21
Difference between sh and bash
01, Nov 21
Difference Between DOS and Windows
10, Apr 20
Difference Between Apache Kafka and Apache Flume
05, May 20
Difference between Bootstrap and AngularJS
20, Mar 19
Difference Between HTML and ASP
09, Nov 17
Difference between PERN and MERN stack
03, May 21
Difference between ASP and ASP.NET
12, Apr 19
Difference between Preemptive Priority based and Non-preemptive Priority based CPU scheduling algorithms
20, Apr 20
What is the Difference between Website and Web Portal
11, May 18
Difference between Web Scraping and Web Crawling
22, Apr 20
Difference between TypeScript and JavaScript
14, Jun 18
Difference between try-catch and if-else statements in PHP
09, Jul 20
Difference between Algorithm, Pseudocode and Program
22, Aug 18
Difference between Dropbox and OneDrive
27, May 20
Difference between Applets and Servlets
28, Aug 18
Difference between fundamental data types and derived data types
04, Sep 18
Difference between HTML and HTML5
17, Sep 18
What is the difference between parseInt() and Number()?
16, Jul 19
Difference between Indirect and Implied Addressing Modes
19, May 20
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
ks99737
@ks99737
Vote for difficulty
Current difficulty :
Easy





Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!