CSS | align-items Property

Last Updated : 27 Aug, 2021

The align-items property is used to set the alignment of items inside the flexible container or in the given window. It aligns the Flex Items across the axis. The align-self property is used to override the align-items property.

Syntax:

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

Default Value

stretch

Property Value:

stretch: Items are stretched to fit the container and it is the default value.

Syntax:
```
align-items: stretch;
```

Example:

javascript

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
  
        #stretch {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: stretch;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <div id="stretch">
            <div style="background-color:Purple;">
               Purple
            </div>
            <div style="background-color:Yellow;">
               Yellow
            </div>
        </div>
  
    </center>
</body>
  
</html>

Output:

center: The position of Items should be center of the container vertically.

Syntax:
```
align-items: center;
```

Example:

javascript

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
  
        #center {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: center;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <div id="center">
            <div style="background-color:Purple;">
              Purple
            </div>
            <div style="background-color:Yellow;">
              Yellow
            </div>
        </div>
  
    </center>
</body>
  
</html>

Output:

flex-start: Items will be positioned to the beginning of the container.

Syntax:
```
align-items: flex-start;
```

Example:

javascript

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
  
        #flex-start {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: flex-start;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <div id="flex-start">
            <div style="background-color:Purple;">
              Purple
            </div>
            <div style="background-color:Yellow;">
              Yellow
            </div>
        </div>
  
    </center>
</body>
  
</html>

Output:

flex-end: Items will be positioned to the end of the container.

Syntax:
```
align-items: flex-end;
```

Example:

javascript

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
  
        #flex-end {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: flex-end;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <div id="flex-end">
            <div style="background-color:Purple;">
              Purple
            </div>
            <div style="background-color:Yellow;">
              Yellow
            </div>
        </div>
  
    </center>
</body>
  
</html>

Output:

baseline: Items will be positioned to the baseline of the container.

Syntax:
```
align-items: baseline;
```

Example:

javascript

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
  
        #baseline {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: baseline;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <div id="baseline">
            <div style="background-color:Purple;">
              Purple
            </div>
            <div style="background-color:Yellow;">
              Yellow
            </div>
        </div>
  
    </center>
</body>
  
</html>

Output:

initial: Sets this value/property to its default value.

Syntax:
```
align-items: initial;
```

Example:

javascript

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
  
        #initial {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: initial;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <div id="initial">
            <div style="background-color:Purple;">
              Purple
            </div>
            <div style="background-color:Yellow;">
              Yellow
            </div>
        </div>
  
    </center>
</body>
  
</html>