Skip to content
Related Articles

Related Articles

Improve Article

CSS | align-items Property

  • Last Updated : 26 Apr, 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;

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 21.0
  • Internet Explorer 11.0
  • Firefox 20.0
  • opera 12.1
  • Safari 9.0, 7.0 -webkit-

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :