Open In App
Related Articles

CSS align-items Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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: normal|start|end|self-start|self-end
    |baseline, first baseline, last baseline|stretch
    |center|flex-start|flex-end|baseline|safe|unsafe
    |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>

                    

Output:

 

inherit: Inherit the property from the parent element. 

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

  • Google Chrome 29.0 and above
  • Edge 12.0 and above
  • Internet Explorer 11.0 and above
  • Firefox 20.0 and above
  • Opera 12.1 and above
  • Safari 9.0 and above


Last Updated : 01 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads