CSS align-content Property

The align-content property aligns items in a flex container.

The alignment is along flex lines (horizontal virtual lines).

A flex line works like a magnet, pulling items towards it.

Example

#

Flex items aligned along a center flex line.

1
2
3
4
5
6
7
8
9
<style>
  .align-content-center {
    background-color: #776fac;
    padding: 5px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }

  .align-content-center > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="align-content-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Using align-content

With align-content, wrapping items stay with flex lines.

This property only has effect with wrapping items.

This means that flex-wrap must be enabled.

Syntax

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

Values

#

Value Description
stretch Default. Stretches items to take up maximum space
center Groups items along a flex line in the center
flex-start Groups items along a flex line at the top
flex-end Groups items along a flex line at the bottom
space-between Distributes items with maximum space between elements
space-around Distributes items with maximumn space around elements
initial Sets the value to its initial value
inherit Inherits the value from the parent element

More Examples

Click the buttons to see the different align-content values.

1
2
3
4
5
6
7
8
9
<style>
  .flex-box {
    background-color: #776fac;
    padding: 5px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
  }

  .flex-box > div {
    background-color: aliceblue;
    margin: 5px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Did you know?

Did you know?

Align-content versus align-items

Both properties align items inside a flex container.

align-content aligns items along a flex line.

align-items spaces items evenly in the container.

This image shows the difference with both properties having a value of center.


Browser support

This table shows when align-content support started for each browser.

Chrome
21.0 Jul 2012
Firefox
28.0 Mar 2014
IE/Edge
11.0 Oct 2013
Opera
12.1 Nov 2012
Safari
9.0 Sep 2015

You may also like

Guides