align-content - HTML CSS CSS Property

HTML CSS examples for CSS Property:align-content

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

Description

The align-content CSS property aligns the elements within the flex container.

The following table summarizes the align-content Property.

Item Value
Default value: stretch
Applies to:Multi-line flex containers
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


align-content:      center | 
                    flex-start | 
                    flex-end | 
                    space-between | 
                    space-around | 
                    stretch | 
                    initial | 
                    inherit

Property Values

The following table describes the values of this property.

ValueDescription
centerpositioned at the center of the flex container.
flex-startpositioned at the beginning of the flex container.
flex-end positioned at the end of the flex container.
space-between evenly distributed in the flex container so that the space between two adjacent items is same.
space-around evenly distributed in the flex container so that the spaces around every item are same.
stretch stretched to fit the flex container. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element align-content property.

The example below shows the align-content property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 align-content Property</title>
  <style type="text/css">
  .flex-container {<!--from w  ww.  j a v a  2 s  . c  o  m-->
    height: 300px;
    width: 200px;
    font-size: 32px;
    border: 1px solid black;
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-align-content: space-around;
    /* Standard syntax */
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
  }
  .flex-container div {
    height: 75px;
    width: 200px;
  }
  .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