Skip to content
Related Articles

Related Articles

CSS | align-items Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!