align-content | CSS-Tricks

Last updated on: August 11, 2013

The align-content property is a sub-property of the Flexible Box Layout module.

It helps aligning a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Note, this property has no effect when the flexbox has only a single line.

The align-content property accepts 6 different values:

flex-start: lines packed to the start of the container
flex-end: lines packed to the end of the container
center: lines packed to the center of the container
space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: lines evenly distributed with equal space between them
stretch (default): lines stretch to take up the remaining space

The following figure helps understand how the lines are stacked up in a flex container depending on the align-content value:

align-content

Syntax

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

.flex-container {
  align-content: space-around;
}

Demo

The following demo shows how lines are stacked out depending on the `align-content` value:

The red list is set to flex-start
The yellow list is set to flex-end
The blue list is set to center
The green list is set to space-between
The pink list is set to space-around
The brown list is set to stretch

Check out this Pen!

Related Properties

Other Resources

Browser Support

(modern) means the recent syntax from the specification (e.g. display: flex;)
(hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
(old) means the old syntax from 2009 (e.g. display: box;)

Chrome	Safari	Firefox	Opera	IE	Android	iOS
21+ (modern) 20- (old)	3.1+ (old)	2-21 (old) 22+ (new)	12.1+ (modern)	10+ (hybrid)	2.1+ (old)	3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

Comments

Nadav

# July 10, 2013

I’m viewing this page on firefox 22.0 and the demo does not work.

Reply ↓

Mane

Permalink to comment# November 13, 2013

Actually it doesn’t work even on FF 25.0 !
sayid

Permalink to comment# January 1, 2014

It is not working on FF 26 too ><
Jawwad

Permalink to comment# January 25, 2015

http://articles.everytimefun.com/

Yogesh

# May 14, 2014

It is not working on firefox 29.0

Reply ↓

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

Copy and paste this code: micuno *

Notify me of follow-up comments by email.

Notify me of new posts by email.

What now? I have some ideas for you.