align-self - HTML CSS CSS Property

HTML CSS examples for CSS Property:align-self

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. align-self

Description

The align-self property sets the default alignment for items within the flex container.

The following table summarizes the align-self Property.

Item Value
Default value: auto
Applies to:Flex items, including in-flow pseudo-elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 

align-self:     auto | baseline | center | flex-start | flex-end | stretch | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
auto Default value. Takes the value of its parent element align-items property or stretch if it has no parent.
baseline positioned at the baseline of the flex container.
center positioned at the center of the flex container.
flex-start positioned at the beginning of the flex container.
flex-end positioned at the end of the flex container.
stretchstretched to fit the flex container.
initialSets this property to its default value.
inherittake the value of its parent element align-self property.

The example below shows the align-self property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 align-self Property</title>
  <style type="text/css">
  .flex-container {<!-- w  ww.  j  a va 2s. c  o m-->
    height: 200px;
    width: 300px;
    font-size: 32px;
    border: 1px solid black;
    /* Safari */
    display: -webkit-flex;
    -webkit-align-items: flex-start;
    /* Standard syntax */
    display: flex;
    align-items: flex-start;
  }
  .flex-container div {
    min-height: 75px;
    width: 100px;
    /* Safari */
    -webkit-flex: 1;
    /* Standard syntax */
    flex: 1;
  }
  .aligned {
    /* Safari */
    -webkit-align-self: stretch;
    /* Standard syntax */
    align-self: stretch;
  }
  .item1 {
    background: #e84d51;
  }
  .item2 {
    background: #7ed636;
  }
  .item3 {
    background: #2f97ff;
  }
</style>
 </head>
 <body>
  <div class="flex-container">
   <div class="item1 aligned">
    1
   </div>
   <div class="item2">
    2
   </div>
   <div class="item3">
    3
   </div>
  </div>
 </body>
</html>

Related Tutorials