align-items - HTML CSS CSS Property

HTML CSS examples for CSS Property:align-items

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

Description

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

The following table summarizes the align-items Property.

Item Value
Default value: stretch
Applies to:Flex containers
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


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

Property Values

The following table describes the values of this property.

Value Description
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.
stretchDefault value. stretched to fit the flex container. The free-space is divided equally between all the items.
initialSets this property to its default value.
inherittake the value of its parent element align-items property.

The example below shows the align-items property.

Demo Code

ResultView the demo in separate window 

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

Related Tutorials