CSS align-content property

Description

CSS align-content property aligns the group of items vertically (along cross/block/column axis) within a flex or grid container. The container adjusts its padding so as to align the group of items vertically.

axes

We are using a flex container as a container to explain this property.

Syntax

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

Property values

normalDefault

It stretches out the descendant elements to fill the height completely.

align-content: normal;

baseline

It aligns multiple objects (elements) within a group on the normal baseline as you usually see the placement of elements on their own baselines.

align-content: baseline;

center

It aligns the content group in the middle of the container.

align-content: center;

stretch

It stretches all of the objects (elements) in such a way that they occupy the full height of the container.

align-content: stretch;

flex-start

flex-start aligns the content group at the start of the flex container.

align-content: flex-start;

flex-end

flex-end aligns the content group at the end of the flex container.

align-content: flex-end;

space-between

In this case, the first object is aligned at the start of the container and the last object is aligned at the end of the container. The remaining objects are placed in such a way that white space is distributed equally among any two objects. Learn more about css space-between

align-content: space-between;

space-around

The objects are distributed in such a way that there is the same space between the objects except at the start and end of the container.

There is half sized space (half of the space that is between any two objects) before the first object and after the last object.

align-content: space-around;

space-evenly

It adjusts the alignment of objects so as to distribute equal space between and around the objects.

align-content: space-evenly;

Applicable to

It applies to multicol containers, flex containers, and grid containers.

#CSS digger
Was this article helpful?

 

#Item1

#Item2

#Item3

×

Ctrl+D