Align-content - Property CSS

Syntax scheme of align-content.

Description.

align-content is a CSS property, which handles the positioning of rows in a flexible container or in a grid. This positioning takes into account the direction of the container, and the direction of writing according to the language used.

When applied to a flex-box container, the align-content property manages the arrangement of rows along the secondary axis.
Reminder: The primary and secondary axes are defined by the CSS flex-direction property. Most of the time, the secondary axis will be the vertical axis.

When applied to a grid, align-content manages the arrangement of the rows in the grid container, in the event that the cumulative height of those rows is lower than the height of the grille itself.

It should be noted that align-content is responsible for the positioning of the lines, not the elements themselves. These are positioned by the align-items property and the positioning of the elements is done relative to their line, while the lines are positioned relative to the container. The nuance is important, even if very often it doesn't make a difference because the elements occupy the entire height of the line.
For example, here is a flex container whose lines are positioned at the beginning of the container by the align-content property, and the elements positioned at the bottom of their line by align-items.

And, as a second example, a flex container whose lines are positioned at the end of the container, and the elements centered in their line.

Values for align-content.

In all of the examples below, align-items has been set to stretch to make them more readable.

• align-content: normal;

  Default value. Is equivalent to stretch.

   

   

   

   

   

   
• align-content: stretch;

  The lines are stretched to occupy the entire height of the container.

  The elements of the flex container are visible in blue, but keep in mind that align-content takes care of aligning the lines, and not the elements themselves.

   

   

   

   

   

   
• align-content: center;

  The rows are grouped in the center of the container.

   

   

   

   

   

   
• align-content: flex-start; align-content: start;

  These two values are treated equally by browsers, although the flex-start value is reserved for flex containers. The rows are grouped at the beginning of the container. In the case of a flex-box, the notion of the beginning depends on the direction that has been chosen for the container. Most of the time this will match the top of the container.

   

   

   

   

   

   
• align-content: flex-end; align-content: end;

  These two values are also synonymous for browsers. The rows are grouped at the end of the container. In the case of a flex-box, the end depends on the direction that has been chosen for the container. Most of the time this will match the bottom of the container.

   

   

   

   

   

   
• align-content: space-between;

  The first element is placed at the very beginning of the container, the last element at the very end.
  If R is the remaining height to be distributed and n is the number of lines, the spacing E will be calculated by the formula :
  E = R / (n-1)

   

   

   

   

   

   
• align-content: space-around;

  The gaps between, before, and after the lines are adjusted to distribute the lines over the entire height of the flex container or grid.
  Let R be the height remaining to be distributed and n the number of rows, we will have the following calculations:
  Space at the beginning and at the end: E = R /2n
  Space between lines: E = R / n

   

   

   

   

   

   
• align-content: space-evenly;

  The spaces between, before and after the lines are calculated to be all identical. The lines are spread over the entire height of the container. The remaining spaceR is distributed equally among all these spaces:
  E = R / (n+1)

   

   

   

   

   

   
• align-content: baseline; ⚠ align-content: first baseline; ⚠ align-content: last baseline; ⚠

  The alignment is done along the baseline of the text, taking the first or last element of the line as a reference. The word first being by default, we can omit it and indicate only baseline.

  

  In the examples below, we had to apply the value to align-items as well.

   
   

   

   

   

   

   
   

  align-content:first baseline;
align-items:first baseline;

   
   

   

   

   

   

   
   

  align-content:last baseline;
align-items:last baseline;
• align-content: safe center; align-content: unsafe end;

  The safe and unsafe modifiers are used with the start, center, and end alignments.

  The safe modifier solves the problem of overflows that can occur with certain types of alignments. This is because content that overflows from the top is not accessible with the scroll bars.
  The example below is a fixed-height grid that contains elements whose content exceeds the available space. The alignment of the lines has been positioned on center. A scroll bar has been provided, but you notice that it does not allow you to go back up to show the beginning of the text.

  This relatively large element extends over several lines and extends beyond the top of the container. The first line of his text is not accessible.

  This second element is smaller, but its beginning is illegible.

  With the indication safe (below), if there is an overflow, the browser will prefer to shift the elements so that the overflow is downwards, to the detriment of strict compliance with the required alignment value.
  

  This relatively large element extends over several lines and extends beyond the top of the container. The first line of his text is not accessible.

  The same is true for this second element.

  Since unsafe is the default, it is rarely stated.

• align-content: initial; (normal) align-content: inherit; align-content: revert; align-content: revertLayer; align-content: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Manipulate the align-content property by program.

Use Javascript to change the value of align-content.

We can see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with camel-case notation (a capital letter to separate words).

let el = document.getElementById('id'); el.style['align-content'] = 'center'; // or let el = document.getElementById('id'); el.style.alignContent = 'center';

Read the value of align-content with Javascript.

The property must have been assigned directly to the element itself and not through a selector CSS. The value is returned as set.

let el = document.getElementById('id'); let value = el.style['align-content']; // or let el = document.getElementById('id'); let value = el.style.alignContent;

Read the calculated value of align-content in Javascript.

The calculated value is the value that results either from the application of a value to the element via some selector, or from the resolution of the of possible inheritances taking into account priorities, or it will be the default.

In the case of align-content, the value is returned as defined in the style sheet.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('align-content');

Use JQuery to change the value of the align-content property.

JQuery also allows you to change the value of a property, with a shorter syntax.


$('#id').css('align-content', 'center');
// or
$('#id').css('alignContent', 'center');


Read the calculated value of the align-content property with JQuery.

let value = $('#id').css('align-content');

Other code samples.

More examples of Javascript and JQuery code are given on the Javascript and CSS page.

Test for yourself.

The buttons below apply the entered value to the align-content property and then display either the value as it was applied, or the calculated value. This second option allows you to see how the value of align-content is stored (serialized). in particular how the default values are noted.

Interactive example on a flex-box and on a grid.

Remember that the effect of the align-content property is applied along the secondary axis of the flex container. You can choose how the flex container is oriented below (flex-direction property).

Browser support (compatibility).

The align-content property is well recognized by today's browsers, both in a flex-box and in a grid, but it remains problems aligning blocks, or for the layout on multiple columns.

1

align-content
property
(flex-box)

2

align-content
property
(grid)

3

align-content
property
(multi-column)

4

align-content
property
(blocks)

Estimated overall support.

96%

96%

85%

87%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

Property align-content history.

• CSS Flexible Box Layout Module Level 1

  Introduction of flex-boxes for flexible layouts.
  Description of the align-content property in the context of a flex-box.
  

  July 23, 2009

  Working Draft.

  

  September 18, 2012

  Candidate Recommendation.

  

  

• CSS Grid Layout Module Level 1

  Introduction of grid layouts.
  Description of the align-content property in the context of a grid.
  

  April 07, 2011

  Working Draft.

  

  September 29, 2016

  Candidate Recommendation.

  

  

• CSS Grid Layout Module Level 2

  No change regarding the align-content property.
  

  February 06, 2018

  Working Draft.

  

  August 18, 2020

  Candidate Recommendation.

  

  

• CSS Box Alignment Module Level 3

  The description of the align-content property has been transferred to this "Box alignment" module.
  

  June 12, 2012

  Working Draft.

  

  

  

See also: Other Alignments.

The align-content property was first described in the Grid and Flex-Box Specifications. A specification for alignments has since been created: CSS Box Alignment Module.

Properties:

align-items

Vertical alignment of elements in a flex-box or grid.

align-self

Vertical alignment of one of the elements in a flex-box or grid.

column-gap

Sets the spacing between columns.

gap

Sets spacing between rows and between columns in the context of a grid, flex-box, or multi-column layout)

grid-column-gap

Specifies the spacing between columns in a grid.

grid-gap

Adjusts the spacing of rows and columns in the context of a grid.

grid-row-gap

Specifies the spacing between lines in a grid.

justify-content

Defines the positioning along the main axis in a flex-box or grid.

justify-items

Manages the horizontal alignment of elements in a grid container.

justify-self

Defines the horizontal positioning of a particular element in a flex-box or grid.

place-content

Arrange elements in a flex-box or grid.

place-items

Defines the placement of elements in their cells (in the context of a grid).

place-self

Defines the alignment of an element in both the inline and block directions.

row-gap

Defines the space between the lines of a grid.