Related Articles

Related Articles

CSS | align-items Property
  • Last Updated : 06 Aug, 2019

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

center: The position of Items shold be center of the container virticaly.



  • Syntax:
    align-items: center;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

flex-start: Items will be positioned to the beginning of the container.

  • Syntax:
    align-items: flex-start;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

flex-end: Items will be positioned to the end of the container.

  • Syntax:
    align-items: flex-end;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

baseline: Items will be positioned to the baseline of the container.

  • Syntax:
    align-items: baseline;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

initial: Sets this value/property to its default value.

  • Syntax:
    align-items: baseline;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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