align-self property

The align-self property specifies an alignment along the cross axis for a single flex block and along the vertical axis for an single element in the grid. In essence, this property is the align-items property, but for a specific block.

Syntax

selector {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Values

Value	Description
`flex-start`	Block is pressed to the start of the cross axis.
`flex-end`	Block is pressed to the end of the cross axis.
`center`	Block is centered on the cross axis.
`baseline`	Block is aligned to its baseline. The baseline (or font line) is an imaginary line running along the bottom edge of characters without taking into account overhangs, for example, like the `'p'`, `'q'`, `'y'`, `'g'` letters.
`stretch`	Block is stretched, taking up all the available space along the cross axis, while still taking into account `min-width` and `max-width`, if specified. If the width and height for the element are specified, `stretch` will be ignored.
`auto`	Block will be aligned as specified in the `align-items` property.

Default value: auto.

Example . The stretch value

In this example, all blocks are set to flex-start (align-items property), and the third block is set to align-self in the stretch value:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: stretch;
}

Example . The flex-end value

In this example, all blocks have the align-items property set to flex-start, and the third block has align-self set to flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: flex-end;
}

Example . Alignment to the start of the vertical axis in the grid

Let's set an alignment of the first element to the start of the vertical axis:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: start;
}

Example . Aligning to the center of the vertical axis in the grid

Let's set an alignment of the first element to the center of the vertical axis:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: center;
}

Example . Aligning to the end of the vertical axis in the grid

Let's set an alignment of our first element in the grid to the end of the vertical axis:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: end;
}