CSS Almanac » Properties » A » align-content

By Last Updated On

align-content

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

  1. Nadav
    Permalink to comment#

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

    Reply ↓
  2. Yogesh
    Permalink to comment#

    It is not working on firefox 29.0

    Reply ↓

Leave a Comment

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 triple backtick fences like this:

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

We have a pretty good* newsletter.