align-self

Posted by on

The align-self property changes the arrangement of the individual items inside the flex container still its not very popular css3 property and also not either very familiar with all browser,  I'll show you how does it work.

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

align-self: values ;

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

    div

    div

    div

    div

    div

    div

  • 1[Stretch] this value is use to stretched and cover to fit the container like below. 
    #box {
   width:400px;
   height:300px;
   border: 1px solid #000000;
   display: -webkit-flex;  
   display: flex;
   -webkit-align-items: flex-start; 
   -moz-align-items:flex-start;
   align-items: flex-start;
   margin: 10px;
        }
#box div{
    flex:1;
        }
.flex-div{
   align-self:stretch;
}

    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: -webkit-flex;  
   display: flex;
   -webkit-align-items: flex-start; 
   -moz-align-items:flex-start;
   align-items: flex-start;
   margin: 10px;
        }
#box div{
    flex:1;
        }
.flex-div{
   align-self:center;
}

    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: -webkit-flex;  
   display: flex;
   -webkit-align-items: flex-start; 
   -moz-align-items:flex-start;
   align-items: flex-start;
   margin: 10px;
        }
#box div{
    flex:1;
        }
.flex-div{
   align-self:flex-start;
}

    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: -webkit-flex;  
   display: flex;
   -webkit-align-items: flex-start; 
   -moz-align-items:flex-start;
   align-items: flex-start;
   margin: 10px;
        }
#box div{
    flex:1;
        }
.flex-div{
   align-self:flex-end;
}

    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: -webkit-flex;  
   display: flex;
   -webkit-align-items: flex-start; 
   -moz-align-items:flex-start;
   align-items: flex-start;
   margin: 10px;
        }
#box div{
    flex:1;
        }
.flex-div{
   align-self:baseline;
}

    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: -webkit-flex;  
   display: flex;
   -webkit-align-items: flex-start; 
   -moz-align-items:flex-start;
   align-items: initial;
   margin: 10px;
        }
#box div{
    flex:1;
        }
.flex-div{
   align-self:stretch;
}

    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

Post a comment