CSS align-content Property
Tags: learncss
Published: 2021-02-13 09:43:42

---
title: CSS align-content Property
published: true
date: 2021-02-12 06:21:13 UTC
tags: LearnCSS
canonical_url: https://sharepointanchor.com/learn-css/css-align-content-property/
---

The <abbr title="Cascading Style Sheets"><a href="https://sharepointanchor.com/category/learn-css/" title="CSS" data-wpil-keyword-link="linked">CSS</a></abbr> align-content property is used to **align a flex container’s lines** when there is an extra space in the cross-axis. It is one of the CSS3 properties. If the flex box contains only one line, then this property will not affect. It needs multiple lines within a flexible container.

The default value of this property is “ **stretch** “. It will make items fit into the container.

- The align-content property accepts the following values. 
  - **flex-start**
  - **flex-end**
  - **center**
  - **space-between**
  - **space-around**
  - **stretch**

## Syntax:

```

align-content: flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit;

```

## Values:

| **Value** | **Description** |
| --- | --- |
| stretch | This is the default value of an align-content property. It makes **items fit into the container**. |
| center | It will **place the items at the center** of the container. |
| flex-start | This property will **place the items at the beginning of the container**. |
| flex-end | It helps to **place the items at the end of the container**. |
| space-between | This property is used to **place the items between the lines**. |
| space-around | It distributes items with **equal space** between them. |
| initial | This will make the property use its **default**  **value**. |
| inherit | It can **inherit the property from** its **parent element**. |

## Align-Content Property with Stretch Value:

The following code uses align-content property with stretch value.

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {

        width: 70px;

        height: 300px;

        padding: 0;

        border: 1px solid #c3c3c3;

        display: -webkit-flex;

                -webkit-flex-flow: row wrap;

                -webkit-align-content: stretch;

                display: flex;

        flex-flow: row wrap;

        align-content: stretch;
      }
      #example li {

        width: 70px;

        height: 70px;

        list-style: none;
      }
    </style>
  </head>
  <body>

    <h2>Align-content: stretch; example</h2>

    <ul id="example">

      <li style="background-color:#8ebf42;"></li>

      <li style="background-color:#1c87c9;"></li>

      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

```

## Result:

From the above code, we can get the result as given in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_WF5QXfASs7.png)<figcaption>align-content with stretch value</figcaption>

## Align-Content Property with center Value:

You can use the below-given code to align-content in center of the page.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {

        width: 70px;

        height: 300px;

        padding: 0;

        border: 1px solid #c3c3c3;

        display: -webkit-flex;

                -webkit-flex-flow: row wrap;

                -webkit-align-content: center;

                display: flex;

        flex-flow: row wrap;

        align-content: center;
      }
      #example li {

        width: 70px;

        height: 70px;

        list-style: none;
      }
    </style>
  </head>
  <body>

    <h2>Align-content: center</h2>

    <ul id="example">

      <li style="background-color:#8ebf42;"></li>

      <li style="background-color:#1c87c9;"></li>

      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

```

## Result:

After running the above code, we will get the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_o2SBeolYJD.png)<figcaption>Align-content with center value</figcaption>

## Align-Content Property with flex-start Value:

The following code will apply the align-content property with flex-start value.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {

        width: 70px;

        height: 300px;

        padding: 0;

        border: 1px solid #c3c3c3;

        display: -webkit-flex;

                -webkit-flex-flow: row wrap;

                -webkit-align-content: flex-start;

                display: flex;

        flex-flow: row wrap;

        align-content: flex-start;
      }
      #example li {

        width: 70px;

        height: 70px;

        list-style: none;
      }
    </style>
  </head>
  <body>

    <h2>Align-content: flex-start</h2>

    <ul id="example">

      <li style="background-color:#8ebf42;"></li>

      <li style="background-color:#1c87c9;"></li>

      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

```

## Result:

By executing above code, you will get the output as follows.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_n8iIEgXJyp.png)<figcaption>Align-content with flex-start value</figcaption>

## Align-Content Property with flex-end Value:

To know how to use align-content property with flex-end value, use the following code.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {

        width: 70px;

        height: 300px;

        padding: 0;

        border: 1px solid #c3c3c3;

        display: -webkit-flex;

              -webkit-flex-flow: row wrap;

               -webkit-align-content: flex-end;

                display: flex;

        flex-flow: row wrap;

        align-content: flex-end;
      }
      #example li {

        width: 70px;

        height: 70px;

        list-style: none;
      }
    </style>
  </head>
  <body>

    <h2>Align-content: flex-end</h2>

    <ul id="example">

      <li style="background-color:#8ebf42;"></li>

      <li style="background-color:#1c87c9;"></li>

      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

```

## Result:

After executing the above code, you can get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/explorer_uSOuJdHTmr.png)<figcaption>Align-content with flex-end value</figcaption>

## Align-Content Property with space-between Value:

You can use the following code to know how to align content with space between them.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {

        width: 70px;

        height: 300px;

        padding: 0;

        border: 1px solid #c3c3c3;

        display: -webkit-flex;

                -webkit-flex-flow: row wrap;

                -webkit-align-content: space-between;

                display: flex;

        flex-flow: row wrap;

        align-content: space-between;
      }
      #example li {

        width: 70px;

        height: 70px;

        list-style: none;
      }
    </style>
  </head>
  <body>

    <h2>Align-content: space-between</h2>

    <ul id="example">

      <li style="background-color:#8ebf42;"></li>

      <li style="background-color:#1c87c9;"></li>

      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

```

## Result:

After running the above code, you will see that the content are aligned with space between them as shown in the below screenshot.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_WZYQcdOea8.png)<figcaption>Align-content with space-between value</figcaption>

## Align-Content Property with space-around Value:

You can apply the following code to align the content with space around them.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {

        width: 70px;

        height: 300px;

        padding: 0;

        border: 1px solid #c3c3c3;

        display: -webkit-flex;

                -webkit-flex-flow: row wrap;

                -webkit-align-content: space-around;

                display: flex;

        flex-flow: row wrap;

        align-content: space-around;
      }
      #example li {

        width: 70px;

        height: 70px;

        list-style: none;
      }
    </style>
  </head>
  <body>

    <h2>Align-content: space-around</h2>

    <ul id="example">

      <li style="background-color:#8ebf42;"></li>

      <li style="background-color:#1c87c9;"></li>

      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

```

## Result:

From the above code, you can get the output as given in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_Gx333c1QK2.png)<figcaption>Align-content with Space-around value</figcaption>

## Browser-Support

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_kDYaavPgrb.png)<figcaption>Browser-Support</figcaption>

The post [CSS align-content Property](https://sharepointanchor.com/learn-css/css-align-content-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).