It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Making CSS Align Content

Reading time 2 min
Published Aug 8, 2017
Updated Oct 15, 2019

The CSS align-content property

In CSS3, the align-content property was introduced. It allowed the developers to modify the way the content of a flex container is displayed vertically (on the cross axis):

Example
div {
    width: 80px;
    height: 350px;
    border: 2px solid #41caf4;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-flex; 
    display: flex;
    -webkit-align-content: left;
    align-content: left;
}

While it might seem similar to the align-items property, it aligns the flex lines instead of the items:
Css Align Content

align-content: CSS syntax

The syntax for the CSS align-content property is simple – all you need to define is the property value:

align-content:value;

You can find all the available values for flex alignment in the table below.

Property values

Value Description
flex-start Packs the lines to the start of the flex container
center Packs the lines to the center of the flex container
flex-end Packs the lines to the end of the flex container
space‑between Distributes the lines evenly with the first line at the start and the last one at the end of the flex container
space‑around Distributes the lines evenly with equal spaces in-between
stretch Stretches the lines to occupy all the space. The default value.
initial Returns the default value
inherit Inherits the value from the parent element

Note: you can't make CSS align content if you only have a single line in the container: there has to be more free space than the content occupies.

Browser support

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
20+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
20+
Browser image
Opera
12.1+
Browser image
Safari
9+