CSS align-content – packing multiple flex lines

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis. This property has no effect on a single-line flex container.

Syntax:

.someflexcontainer {
  display: flex;
  align-content: stretch;
}

CSS property align-content

CSS version: CSS 3
Value: flex-start | flex-end | center | space-between | space-around | stretch
Initial: stretch
Applies to: multi-line flex containers
Inherited: no

align-content values

stretch flexbox-align-content-stretch
flex-start flexbox-align-content-flex-start
flex-end flexbox-align-content-flex-end
center flexbox-align-content-center
space-between flexbox-align-content-space-between
space-around flexbox-align-content-space-around

Example – align-content

In the following code, CSS property align-content can be changed to the following values
  • stretch
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
<style>
.fbox {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  width: 100px; background-color:gray; height: 120px;
}
.child {
  background-color:lightblue;
  border: 1px solid black; padding: 5px;
}
</style>

<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
<div class="child">div4</div>
<div class="child">div5</div>
</div>
align-content refresh

Specification and Browser compatibility

SpecificationStatusCategories
Flexible Box Layout ModuleW3C Working DraftCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments