alignContent - Javascript CSS Style Property

Javascript examples for CSS Style Property:alignContent

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. alignContent

Description

The alignContent property aligns the flexible container's items when there are extra vertical space.

Property Values

Value Description
stretch Default value. Items are stretched to fit the container
centerpositioned at the center
flex-startpositioned at the beginning
flex-end positioned at the end
space-between positioned with space between the lines
space-around positioned with space before, between, and after the lines
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: stretch
Return Value: A String, representing the align-content property of an element
CSS VersionCSS3

The following code shows how to Position the items of the flexible <div> element with space between the lines:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from w ww . j a  va2s .c o  m
    width: 140px;
    height: 300px;
    border: 1px solid #000000;
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: row wrap; /* Safari 6.1+ */
    -webkit-align-content: space-around; /* Safari 7.0 */
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:red;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
  <div style="background-color:lightgreen;"></div>
</div>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("main").style.WebkitAlignContent = "space-between"; // Code for Safari 7.0+
    document.getElementById("main").style.alignContent = "space-between";
}
</script>

</body>
</html>

Related Tutorials