CSS align-items Property
Tags: learncss
Published: 2021-02-13 10:12:09

---
title: CSS align-items Property
published: true
date: 2021-02-12 07:57:39 UTC
tags: LearnCSS
canonical_url: https://sharepointanchor.com/learn-css/css-align-items-property/
---

The <abbr title="Cascading Style Sheet"><a href="https://sharepointanchor.com/category/learn-css/" title="CSS" data-wpil-keyword-link="linked">CSS</a></abbr> 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;

```

## 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>

```

## 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_cIsxTK9X8j.png)<figcaption>Align-items with stretch value</figcaption>

<script async src="//jsfiddle.net/Share_Point_Anchor/ph2vjdg7/2/embed/html,result/"></script>

## 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>

```

## Result:

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

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

## 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>

```

## Result:

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

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

## 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>

```

## 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.

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

## 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>

```

## Result:

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

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

## Browser-Support

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

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