align-items


The align-items property pretty similar to the align-content they both work equivalent but it work with display flex property still its not very popular css3 property and also not either very familiar with all browser,  I'll show you how does it work and what can you do with this.

Note: You can how check out the align-content css3 property here align-content ;
css3,html5,html,css align-content,css3 align-items,buttons,javascript,free css3,property of css3,property css3 list,

align-items: values ;

These are the values of the Css 3 align-items property
align-items:[stretch] [center] [flex-start] [flex-end] [baseline] [initial][inherit];
  1. [Stretch]
  2. [Center]
  3. [Flex-start]
  4. [Flex-end]
  5. [Baseline] 
  6. [initial]
  7. [inherit]   
  • 1[Stretch] this value is use to stretched and cover the existing space of the container like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       align-items:stretch;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div

    div

    div

    div

    div

    div

  • 2[Center ] this value is use to arrange the item to the center of the container  like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       align-items:center;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div

    div

    div

    div

    div

    div

  • 3[Flex-start] this value is use to arrange the item on the top of the container like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       align-items:Flex-start;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div

    div

    div

    div

    div

    div

  • 4[Flex-end] this value is use to arrange the item on the bottom of the container like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       align-items:Flex-end;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div

    div

    div

    div

    div

    div

  • 5[Baseline] this value is use to arrange the baseline of the container box like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       align-items:baseline;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div

    div

    div

    div

    div

    div

  • 6[initial] this value is use to give default state like below.
    #box {
       width:400px;
       height:300px;
       border: 1px solid #000000;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       align-items:initial;
       margin: 10px;
            }
    #box div{
       width: 80px;
       height: 80px;
            }
    

    div

    div

    div

    div

    div

    div

Inherit

The [inherit] value is use to get value from its parent like below.
.color-box div{
  background: #70D8CC;  
  border:1px solid black;
  width: 80px;
  height: 80px;
}
.color-box div{
  background: inherit;  
  border:1px solid black;
  width: 80px;
  height: 80px;
}

without inherit

Inherit

Browser Support

Firefox
Chrome
Opera
Safari
28
20+
12+
9+

Comments