Align-items - Property CSS
Summary of characteristics of the align-items property
normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline | first baseline | last baselinenormalDiscrète : during an animation, the align-items property passes from one value to another without transition.Syntactic schema of align-items.
Description of the align-items property.
align-items is a CSS property, which manages the placement of elements in a flex container or in a grid cell.
This alignment takes into account the direction of filling the flex content, and the direction of writing of the language used.
It is important to note that this positioning is done in relation to the line, which is itself positioned in relation to the container
with the align-content property.
Application to a flex-box.
The align-items property manages the arrangement of children in a flex box, along the secondary axis. Most of the time (for Latin languages)
this will be the vertical axis.
Remember: The secondary axis and the main axis of a flex-box are defined by the flex-direction property.
To manage the layout of each child independently, see the align-self property.
Application to a grid.
The align-items property controls the vertical arrangement of elements relative to their row height.
To manage the layout of the rows themselves, see the align-content property.
Values for align-items.
- align-items: stretch;
The elements are stretched to fill the full height of the lines.
AaaaAaaaAaaaAaaaAaaaAaaa - align-items: center;
The elements are centered in their line.
AaaaAaaaAaaaAaaaAaaaAaaa - align-items: flex-start; align-items: start;
These two values are treated in the same way by browsers: the elements are positioned at the beginning of their line. Most of the time (for Latin languages) this will be the top of the line, but it can also be the bottom for other languages. The language taken into account is the one specified for the flex or grid container.
AaaaAaaaAaaaAaaaAaaaAaaa - align-items: flex-end; align-items: end;
These two values are equivalent: the elements are positioned at the end of their row. As for
start, the notion of end depends on the language of the text, but for Latin languages, it corresponds to the bottom of the line. The language considered is that of the container.AaaaAaaaAaaaAaaaAaaaAaaa - align-items: self-start; align-items: self-end;
Elements are positioned at the beginning or end of their line, both of which are dependent on the language of the element itself (and no longer the language of the container).
AaaaAaaaAaaaAaaaAaaaAaaa - align-items: baseline; align-items: first baseline; align-items: last baseline;
The elements are aligned vertically with respect to the baseline of the text.
If
lastis specified, the baseline of the last line is used as a reference. We can specifyfirstbut it is the value default:First baselineis equivalent tobaseline.AaaaAaaaAaaaAaaaAaaaAaaaThe baseline of a text is located at the base of the letters without jambs.
- align-items: safe center; align-items: unsafe center;
The
safeandunsafekeywords can be added before thestart,end, orcentervalues. They are used to solve the problem of overflow from the top. When an item contains too much content for the available space, that content may be partly masked. If it is centered or aligned from the bottom, the overflow can be done from the top of the element (it is the beginning of the text that is hidden). In this case, even adding a scroll bar will not show the part of the content that is hidden.With the word
safe, the browser will always place the overflows of content downwards, even if it means not scrupulously respecting the alignment requested. Theunsafevalue, on the other hand, requires that the alignment be respected, even if this causes an upward overflow.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 and can be displayed in its entirety (no problem).align-items:unsafe center;This element extends beyond the height of the container. However, it is fully viewable using the scroll bar, including the first few lines.This second element is smaller and can be displayed in its entirety (no problem).align-items:safe center;Since
unsafeis the default, it is rarely stated.
Values common to all properties:
align-items: initial (normal)
align-items: inherit
align-items: revert
align-items: revertLayer
align-items: unset
Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.
Manipulate the align-items property programmatically.
Change the value of align-items with Javascript.
In Javascript, here's how to change the value of align-items.
Javascript supports two syntaxes; one with the typical CSS notation, in kebab-case (a dash to separate words),
and another with the camel-case, usual notation in Javascript (a capital letter to separate words).
let el = document.getElementById('id');
el.style['align-items'] = 'center';
// or
let el = document.getElementById('id');
el.style.alignItems = 'center';
Read the value of align-items in Javascript.
The property must have been assigned directly to the element itself and not through a selector. The value is returned as she has been defines.
let el = document.getElementById('id');
let value = el.style['align-items'];
// or
let el = document.getElementById('id');
let value = el.style.alignItems;
Read the computed value of align-items in Javascript.
The computed value is either the value assigned in the style sheet (or in the style attribute) or the value determined by considering
possible legacies and priorities. Otherwise, it will be the initial value of the property (normal in the case of align-items).
In the case of align-items, the value is returned as one of the predefined values accepted by the property.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('align-items');
Change the value of the align-items property with JQuery.
Two syntaxes (very little different) are also possible in JQuery.
$('#id').css('align-items', 'center');
// or
$('#id').css('alignItems', 'center');
Read the computed value of the align-items property with JQuery.
let value = $('#id').css('align-items');
Test for yourself.
This small simulator allows you to test for yourself the assignment of the align-items property and the restitution of its value as it was
assigned (first button) or its computed value (second button).
Simulator of align-items on a flex-box and on a grid.
Our simulator allows you to see the effect of the align-items property on a flex container and on a grid container.
In principle, the flex-start and flex-end values are reserved for flex containers, but we can see that most
browsers also process them in the case of a grid.
The font sizes are different between the elements, to illustrate the behavior of the baseline values.
flex-direction : (pour le conteneur flex uniquement)
(for first)
(for first)
Browser support.
The align-items property is now well recognized by newer browsers, both in the context of a flex-box and in the context of a grid.
the align-items property in the context of a flex-box container.align-items dans le contexte d'un conteneur grille.Notes:
(1) In Internet Explorer 10 and 11, if flex elements have align-items:center and their content is too large, they will overflow their container boundaries.
align-itemsproperty
(Flex-box)
align-itemsproperty
(Grid)
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Chrome
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
align-items property evolution.
The align-items property was first described in the grid or flex-box specifications. But a specific specification
to the alignments of the blocks was then created.
-
CSS Flexible Box Layout Module Level 1
First specification regarding flex-boxes and first description of thealign-itemsproperty.
July 23, 2009Working Draft.
September 18, 2012Candidate Recommendation.
-
CSS Grid Layout Module Level 1
First specification for grids, and introduction of thealign-itemsproperty.April 07, 2011Working Draft.September 29, 2016Candidate Recommendation. -
CSS Grid Layout Module Level 2
No change to thealign-itemsproperty.February 06, 2018Working Draft.August 18, 2020Candidate Recommendation. -
CSS Box Alignment Module Level 3
Creation of a specification module specific to alignments. The description of thealign-itemsproperty is transferred to this module.June 12, 2012Working Draft.
Other properties related to block alignment.
Properties: