Align-content - Property CSS
Summary of characteristics of the align-content property
normal | start | end | flex-start | flex-end | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baselinenormalDiscrète: during an animation, the align-content property passes from one value to another without transition.Per grammar: serialization in the order of syntax.Syntax scheme of align-content.
align-content property.The links in the diagram provide more details about the values.
Download the schematic in SVG
* indicates a default value, which can be omitted.
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.
align-content:start;
align-items:end;
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.
align-content:end;
align-items:center;
Other properties to know.
These properties all relate to the positioning of elements, but some of them do not apply to flex-box, such as justify-items or
place-items, for example.
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-contenttakes 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-startvalue 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.
IfRis the remaining height to be distributed andnis the number of lines, the spacingEwill 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.
LetRbe the height remaining to be distributed andnthe 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 space
Ris 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
firstbeing by default, we can omit it and indicate onlybaseline.
In the examples below, we had to apply the value to
align-itemsas 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
safeandunsafemodifiers are used with thestart,center, andendalignments.The
safemodifier 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 oncenter. 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
unsafeis 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).
align-content with Javascript.
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).
flex-direction : (Flex container only)
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.
the align-content property in the context of a flex-box container.the align-content property in the context of a grid container.the align-content property in the context of a multi-column layout.the align-content property to align blocks.align-contentproperty
(flex-box)
align-contentproperty
(grid)
align-contentproperty
(multi-column)
align-contentproperty
(blocks)
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
Property align-content history.
-
CSS Flexible Box Layout Module Level 1
Introduction of flex-boxes for flexible layouts.
Description of thealign-contentproperty in the context of a flex-box.
July 23, 2009Working Draft.
September 18, 2012Candidate Recommendation.
-
CSS Grid Layout Module Level 1
Introduction of grid layouts.
Description of thealign-contentproperty in the context of a grid.April 07, 2011Working Draft.September 29, 2016Candidate Recommendation. -
CSS Grid Layout Module Level 2
No change regarding thealign-contentproperty.February 06, 2018Working Draft.August 18, 2020Candidate Recommendation. -
CSS Box Alignment Module Level 3
The description of thealign-contentproperty has been transferred to this "Box alignment" module.June 12, 2012Working 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: