DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

CSS align-content Property

The CSS 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;

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

align-content with stretch value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Align-content with center value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Align-content with flex-start value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Align-content with flex-end value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Align-content with space-between value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Align-content with Space-around value

Browser-Support

Browser-Support

The post CSS align-content Property appeared first on Share Point Anchor.

Top comments (0)