CSS Property align-content








The align-content property aligns a flex container's lines within the flex container when there is extra space on the cross-axis.

This property has no effect on single line flexible boxes.

Summary

Initial value
stretch
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.alignContent="center"
Animatable
yes

CSS Syntax

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

Property Values

stretch
Default value. Items are stretched to fit the container
center
position items at the center of the container
flex-start
position items at the beginning of the container
flex-end
position items at the end of the container
space-between
position items with space between the lines
space-around
position items with space before, between, and after the lines
initial
sets to default value
inherit
Inherits this property from its parent element.

Browser compatibility

align-content Yes 11.0 28.0 7.0 -webkit- 12.1




Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container > div {<!--  w  w  w.  j a  v a2s. co  m-->
  display: flex;
  flex-flow: row wrap;
  width: 140px;
  height: 140px;
  background:red;
}

#container > div > div {
  margin: 2px;
  width: 30px;
  min-height: 30px;
  background: black;
}

#flex-start {
  align-content: flex-start;
}

#center {
  align-content: center;
}

#flex-end {
  align-content: flex-end;
}

#space-between {
  align-content: space-between;
}

#space-around {
  align-content: space-around;
}

#stretch {
  align-content: stretch;
}
</style>
</head>
<body>
<div id="container">
  <p>align-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: stretch</p>
  <div id="stretch">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
</body>
</html>

Click to view the demo