DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

CSS align-items Property

The CSS align-items property is used to specify the default alignment for items inside the flex box. It is one of the CSS3 properties.

  • The available values for the align-items property are as follows.
    • flex-start
    • center
    • flex-end
    • baseline
    • stretch

Syntax:


align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;

Enter fullscreen mode Exit fullscreen mode

Values:

Value Description
stretch This is the default value of an align-items 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.
baseline This value can make items that are positioned at the baseline of the container.
initial This will make the property use its default value.
inherit It can inherit the property from its parent element.

Align-items Property with “Stretch” Value:

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


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

        width: 220px;

        height: 300px;

        padding: 0;

        border: 1px solid #000;

        display: -webkit-flex;

                -webkit-align-items: stretch;

        display: flex;

        align-items: stretch;

      }
      #example li {

        -webkit-flex: 1;

        flex: 1;

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

    <h2>Align-items: stretch</h2>

    <ul id="example">

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

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

      <li style="background-color:#ccc;">Gray</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-items with stretch value

Align-items Property with “Center” Value:

In the following code, you can see the align-items property with center value.


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

        width: 220px;

        height: 300px;

        padding: 0;

        border: 1px solid #000;

        display: -webkit-flex;

                -webkit-align-items: center;

        display: flex;

        align-items: center;
      }
      #example li {

        -webkit-flex: 1;

                flex: 1;

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

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

    <ul id="example">

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

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

      <li style="background-color:#ccc;">Gray</li>

    </ul>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Align-items with center value

Align-items Property with “flex-start” value:

The following code used the align-items property with flex-start value.


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

        width: 220px;

        height: 300px;

        padding: 0;

        border: 1px solid #000;

        display: -webkit-flex;

        -webkit-align-items: flex-start;

        display: flex;

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

        -webkit-flex: 1;

        flex: 1;

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

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

    <ul id="example">

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

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

      <li style="background-color:#ccc;">Gray</li>

    </ul>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

In this example, the items are placed at the beginning.

Align-items property with flex-start value

Align-items Property with the “flex-end” value:

Here, we apply the flex-end value, so it will align-items at the end of the flex box.


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

        width: 220px;

        height: 300px;

        padding: 0;

        border: 1px solid #000;

        display: -webkit-flex;

                -webkit-align-items: flex-end;

        display: flex;

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

        -webkit-flex: 1;

                flex: 1;

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

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

    <ul id="example">

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

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

      <li style="background-color:#ccc;">Gray</li>

    </ul>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

Let’s see the result in the following image. There you can see that all the items are aligned at the end of the container.

Align-items property with flex-end value

Align-items Property with the “baseline” value:

This is the last example with baseline value. It will place the items at the baseline of the container.


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

        width: 220px;

        height: 300px;

        padding: 0;

        border: 1px solid #000;

        display: -webkit-flex;

               -webkit-align-items: baseline;

        display: flex;

        align-items: baseline;
      }
      #example li {

        -webkit-flex: 1;

                flex: 1;

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

    <h2>Align-items: baseline</h2>

    <ul id="example">

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

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

      <li style="background-color:#ccc;">Gray</li>

    </ul>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

After executing the above code, you will get the result as shown in the below screenshot.

Align-items property with baseline value

Browser-Support

Browser Support

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

Top comments (0)