align-content

Posted by Mukesh Singh on

Learn CSS and HTML at CodingGram

CSS Property: align-content

align-content defines how each line is aligned within a flexbox/grid container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox/grid items.

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

align-content: stretch;

Each line will stretch to fill the remaining space.

In below case, the container is 300px high. All boxes are 70px high.

All boxes will occupy space and remaining space will divide to fill the 300px height.

See the Pen
align-content-css-property-stretch
by Mukesh Singh (@codecad)
on CodePen.

align-content: center;
Each line will only fill the space it needs. They will all move towards the center of the flexbox/grid container’s cross axis.

See the Pen
align-content center
by Mukesh Singh (@codecad)
on CodePen.

align-content: flex-start;
Each line will only fill the space it needs. They will all move towards the start of the flexbox/grid container’s cross axis.

See the Pen
align-content flex-start
by Mukesh Singh (@codecad)
on CodePen.

align-content: flex-end;
Each line will only fill the space it needs. They will all move towards the end of the flexbox/grid container’s cross axis.

See the Pen
align-content flex-end
by Mukesh Singh (@codecad)
on CodePen.

align-content: space-between;
Each line will only fill the space it needs. The remaining space will appear between the lines.

See the Pen
align-content space-between
by Mukesh Singh (@codecad)
on CodePen.

align-content: space-around;
Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

See the Pen
align-content space-around
by Mukesh Singh (@codecad)
on CodePen.

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)