# 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; }`

:

## See also

- the `flex-direction` property
  that specifies a direction of the flex block axes
- the `justify-content` property
  that sets an alignment along the cross axis
- the `align-items` property
  that sets an alignment along the cross axis
- the `flex-wrap` property
  that sets the multi-line nature of flex blocks
- the `flex-flow` property
  a shorthand for flex-direction and flex-wrap
- the `order` property
  that specifies an order of flex blocks
- the `flex-basis` property
  that sets a size of a certain flex block
- the `flex-grow` property
  that sets a greediness of flex blocks
- the `flex-shrink` property
  that sets a shrink of flex blocks
- the `flex` property
  a shorthand for flex-grow, flex-shrink and flex-basis

← →
↑
en ru