CSS | align-items Property - GeeksforGeeks

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;
align-items: stretch;
Example:javascriptjavascript<!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>
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;
align-items: center;
Example:javascriptjavascript<!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>
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;
align-items: flex-start;
Example:javascriptjavascript<!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>
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;
align-items: flex-end;
Example:javascriptjavascript<!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>
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;
align-items: baseline;
Example:javascriptjavascript<!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>
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;
align-items: initial;
Example:javascriptjavascript<!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>
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-
arorakashish0911
nikhilchhipa9
hritikbhatnagar2182
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript