.

CSS

Align Content property in CSS

Align Content property in CSS HTML

Open with new tab

Property Definition

The CSS align-content property aligns a flex container's lines of items.

Property Values

It contains 7 possible values.

  1. flex-start
  2. center
  3. flex-end
  4. space-between
  5. space-around
  6. space-evenly
  7. stretch

1.flex-start

Lines are packed towards the start of the flex container.

Example


      <!DOCTYPE html>
      <html>
        <body>
            <div id="container" style="height:350px;width:250px;background-color:#8c8c8c">
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 1</div>
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 2</div>
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 3</div>
           </div>
          <style>
            #container div {
            height: 100px;
            width: 100px;
            }
            #container {
            display: flex;
            flex-wrap: wrap;
            }
            #container {
            align-content: flex-start;
            }
          </style>
        </body>
      </html>
    

Result

Open with new tab

2.center

Lines are packed toward the center of the flex container div.

Example


      <!DOCTYPE html>
      <html>
        <body>
          <div id="container" style="height:350px;width:250px;background-color:#8c8c8c">
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 1</div>
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 2</div>
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 3</div>
           </div>
          <style>
            #container div {
            height: 100px;
            width: 100px;
            }
            #container {
            display: flex;
            flex-wrap: wrap;
            }
            #container {
            align-content: center;
            }
          </style>
        </body>
      </html>
    

Result

Open with new tab

3.flex-end

Lines are packed towards the bottom of the flex container div.

Example


      <!DOCTYPE html>
      <html>
        <body>
            <div id="container" style="height:350px;width:250px;background-color:#8c8c8c">
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 1</div>
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 2</div>
           <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 3</div>
           </div>
          <style>
            #container div {
            height: 100px;
            width: 100px;
            }
            #container {
            display: flex;
            flex-wrap: wrap;
            }
            #container {
            align-content: flex-end;
            }
          </style>
        </body>
      </html>
    

Result

Open with new tab

4.space-between

Lines are evenly distributed in the flex container. The spacing between each pair of adjacent lines is the same.

Example


      <!DOCTYPE html>
      <html>
        <body>
          <div id="container" style="height:350px;width:250px;background-color:#8c8c8c">
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 1</div>
           <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 2</div>
           <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 3</div>
           </div>
          <style>
            #container div {
            height: 100px;
            width: 100px;
            }
            #container {
            display: flex;
            flex-wrap: wrap;
            }
            #container {
            align-content: space-between;
            }
          </style>
        </body>
      </html>
    

Result

Open with new tab

5.space-around

Lines are evenly distributed in the flex container. The spacing between each pair of adjacent lines is the same. The empty space before the first and after the last line equals half of the space between each pair of adjacent lines.

Example


      <!DOCTYPE html>
      <html>
      <body>
          <div id="container" style="height:350px;width:250px;background-color:#8c8c8c">
          <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 1</div>
          <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 2</div>
         <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 3</div>
        </div>
      <style>
            #container div {
            height: 100px;
            width: 100px;
            }
            #container {
            display: flex;
            flex-wrap: wrap;
            }
            #container {
            align-content: space-around;
            }
          </style>
      </body>
      </html>
    

Result

Open with new tab

6.space-evenly

Lines are evenly distributed in the flex container. The spacing between each pair of adjacent lines, the main-start edge and the first line, and the main-end edge and the last line, are all exactly the same.

Example


      <!DOCTYPE html>
      <html>
        <body>
          <div id="container" style="height:350px;width:250px;background-color:#8c8c8c">
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 1</div>
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 2</div>
            <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 3</div>
           </div>
          <style>
            #container div {
            height: 100px;
            width: 100px;
            }
            #container {
            display: flex;
            flex-wrap: wrap;
            }
            #container {
            align-content: space-evenly;
            }
          </style>
        </body>
      </html>
    

Result

Open with new tab

7.stretch

Lines stretch to use the remaining space. The free-space is split equally between all the lines.

Example


      <!DOCTYPE html>
      <html>
      <body>
         <div id="container" style="height:350px;width:250px;background-color:#8c8c8c">
         <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 1</div>
         <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 2</div>
         <div style="background-color:#a0c8ff;border:2px solid #8c8c8c">Item 3</div>
         </div>
      <style>
            #container div {
            height: 100px;
            width: 100px;
            }
            #container {
            display: flex;
            flex-wrap: wrap;
            }
            #container {
            align-content: stretch;
            }
          </style>
      </body>
      </html>
    

Result

Open with new tab