CSS | align-items Property

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;

Property Value:

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

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

Example:

<!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 shold be center of the container virticaly.

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

Example:

<!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:

<!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:

<!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:

<!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: baseline;
```

Example:

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

Output:

inherit: Inherit the property from the parent element.

Supported Browsers: The browser supported by CSS align-items property are listed below:

Google Chrome 21.0
Internet Explorer 11.0
Firefox 20.0
opera 12.1
Safari 9.0, 7.0 -webkit-

My Personal Notes

Recommended Posts: