Align-self - Property CSS

align-self

Summary of characteristics of the `align-self` property

Quick description

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

Status

Standard

Usable for

HTML

Predefined values

Initial value

auto

Inherited by default

No.

Animation type

Discrète : during an animation, the align-self property passes from one value to another without transition.

W3C Module

CSS Box Alignment Module

References (W3C)

🡇

🡅

CSS Box Alignment Module Level 3

Document status: WD (Working Draft)

CSS Grid Layout Module Level 2

Document status: CR (Candidate Recommendation)

CSS Grid Layout Module Level 1

Document status: CR (Candidate Recommendation)

CSS Flexible Box Layout Module Level 1

Document status: CR (Candidate Recommendation)

`Align-self` syntax.

Syntax scheme of the align-self property
Click on the schema links for more details on the values
Download the diagram in SVG

Description of `align-self`.

align-self is a CSS property. It manages the alignment of one of the internal elements in a flexible container or in a grid. It allows you to manage element-by-element alignment, unlike the align-content and align-items properties, which act on all the elements.

When applied to an element in a flex-box, the align-self property manages the position of that element along the secondary axis. Most of the time, for Latin languages, this will be the vertical axis.
Remember: the choice of the primary and secondary axis in a flex-box is defined by the flex-direction property.

Applied to an element in a grid, align-self manages the position of that element in its cell, along the line axis (vertical).

To manage the layout of all elements globally, see the align-items and align-content properties, which you want to apply on the container.

For a detailed overview of the possibilities of flex-boxes or grids, see flex and grid.

Values for `align-self`.

In the explanations below, we have considered that the main axis of the flex-box is the horizontal axis. The secondary axis is therefore the vertical axis. This arrangement is most common for Latin languages.

align-self: auto;

The element is positioned like all the others, according to the align-items property of the flex-box container.

Aa

Aa

Aa

Aa

Aa

Aa
align-self: stretch;

The element is stretched to fill the entire height of the line. To make the effect visible, the align-items property of the container has been set the value start.

Aa

Aa

Aa

Aa

Aa

Aa
align-self: center;

The element is centered vertically in its line.

Aa

Aa

Aa

Aa

Aa

Aa
align-self: flex-start; align-self: start;

The element is positioned at the top of its line.
The first value is more suitable for the flex-box container, while the second is rather reserved for grids but browsers don't make a difference.

Aa

Aa

Aa

Aa

Aa

Aa
align-self: flex-end; align-self: end;

The element is positioned at the bottom of its line.
The first value is more suitable for flex-box containers, while the second is more reserved for grids, but browsers don't make a difference.

Aa

Aa

Aa

Aa

Aa

Aa
align-self: self-start; align-self: self-end;

The element is positioned at the bottom or top of its row height, given its own write settings.

The two green elements below have their align-self property set to start, both have a vertical write mode, but the second to writing direction from bottom to top. This has an impact on their positioning.

/* 1st Element Styles */ /* Second element styles */ writing-mode:vertical-rl; writing-mode:vertical-rl; direction:ltr; direction:rtl; align-self:self-start; align-self:self-start;

Aa

Aa

Aa

Aa

Aa

Aa
align-self: baseline; align-self: first baseline; align-self: last baseline;

The element is positioned vertically relative to the text baseline.
Because align-self applies to individual elements in the flex box or grid, the Baseline value gives the desired result only if at least two elements in the row are aligned along that value.

In the example below, the first three elements are aligned to the text baseline (align-self:baseline). The first example aligns to the first line, and the second example to the last line. It can be seen that, despite their different font sizes, and their padding also different, The text baselines are aligned.

Aa1
Aa2
Aa3

Aa
Aa

Aa

Aa

Aa

Aa

align-self:first baseline;

Aa1
Aa2
Aa3

Aa
Aa

Aa

Aa

Aa

Aa

align-self:last baseline;
align-self: safe center; align-self: unsafe end;

The words safe and unsafe can be associated with an alignment of the type center or end (unsafe being by default, it is rare to specify it).

safe solves the problem of overflow from the top: if the contents are too large for the available space, they can end up hidden. If the element is centered or aligned from the bottom, this overflow can be done from the top of the element (it is the beginning of the text that is hidden). In that case even the 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 requested alignment. The unsafe value, on the other hand, requires that the alignment be respected, even if this causes an upward overflow.

For the operation to be correct, you must also apply safe on the container with align-content.

Aa1
Aa2
Aa3
Aa4
Aa5
Aa6
Aa7

Aa
Aa

Aa

Aa

Aa

Aa

Illustration of the problem
of overflow from the top.

Aa1
Aa2
Aa3
Aa4
Aa5
Aa6
Aa7

Aa
Aa

Aa

Aa

Aa

Aa

Solving problem with
align-content:safe end; on the container align-items:safe end; on the elements

Values common to all properties:


align-self: initial  (auto)
align-self: inherit
align-self: revert
align-self: revertLayer
align-self: unset

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

Animation of the `align-self` property.

The align-self property is of the discrete type, which means that animations abruptly switch it from one value to another.

Manipulating the `align-self` property programmatically.

Force the value of `align-self` in Javascript.

Javascript offers a syntax with kebab-case notation (a dash to separate words), and another syntax with camel-case notation (a capital letter to separate words).


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

Read the value of `align-self` in Javascript.

The property must have been assigned directly to the element itself and not through a selector. That is, this code explores the style attribute of the element. The value is returned as it was defined: one of the values accepted by the property.


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

Read the computed value of `align-self` in Javascript.

The computed value is the value that has been assigned to the item, either directly or through a selector, or the value that results from the inheritance mechanism. Otherwise, e will be the initial value of the property: auto in the case of align-self.


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

Change the `align-self` property with JQuery.

JQuery also provides a syntax (shorter than Javascript) for reading and writing this property.


 $('#id').css('align-self', 'center');
 // or
 $('#id').css('alignSelf', 'center');

Read the value computed with JQuery.


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

Test it yourself.

The buttons below apply the entered value to the align-self property and then display either the value as applied, or the computed value. This second option allows you to see how the value of align-self is stored (serialized). That said, in the case of align-self, it won't make much of a difference.

Browser compatibility.

Column 1

Support for the align-self property in the context of a flex-box container.

Column 2

Support for the align-self property in the context of a grid.

Column 3

Support for start and end values for the align-self property.

Notes:

(1) Internet Explorer 10 and 11 have the property -ms-grid-row-align which acts in a similar way to align-self.

align-self
property
(flex-box)

align-self
property
(grid)

start and end
values

Estimated overall support.

96%

93%

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

See Caniuse.com for more compatibility information.

Caniuse

`align-self` property history.

Alignment properties (including align-self) have been introduced in the specifications for grids and flex-boxes. A module specific to alignments was then added. It includes descriptions of all properties related to block alignments.

CSS Flexible Box Layout Module Level 1

Initial definition of the align-self property in the context of a flex-box.

July 23, 2009
Working Draft.
September 18, 2012
Candidate Recommendation.
CSS Grid Layout Module Level 1

Initial definition of the align-self 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 directly affecting the align-self property.

February 06, 2018
Working Draft.
August 18, 2020
Candidate Recommendation.
CSS Box Alignment Module Level 3

The description of the align-self property is transferred to this module of the standard.

June 12, 2012
Working Draft.