# Свойство align-self

Свойство `align-self` задает выравнивание вдоль поперечной оси для отдельно взятого flex-блока и по вертикальной оси для отдельного элемента в гриде. По сути данное свойство представляет собой свойство `align-items`, но для конкретного блока.

## Синтаксис

`селектор { align-self: auto | flex-start | flex-end | center | baseline | stretch; }`

## Значения

Значение | Описание
--- | ---
`flex-start` | Блок прижат к началу поперечной оси.
`flex-end` | Блок прижат к концу поперечной оси.
`center` | Блок стоит по центру поперечной оси.
`baseline` | Блок выравнивается по своей базовой линии. Базовая линия (англ. baseline, или линия шрифта) - это воображаемая линия, проходящая по нижнему краю символов без учета свисаний, например, как у букв `'ц'`, `'д'`, `'р'`, `'щ'`.
`stretch` | Блок растянут, занимая все доступное место по поперечной оси, при этом все же учитываются `min-width` и `max-width`, если они заданы. Если же задана ширина и высота для элемента - `stretch` будет проигнорирован.
`auto` | Блок будет выровнен так, как задано в свойстве `align-items`.

Значение по умолчанию: `auto`.

## Пример . Значение stretch

В данном примере всем блокам задано значение flex-start (свойство `align-items`), а третьему блоку - `align-self` в значении `stretch`:

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

:

## Пример . Значение flex-end

В данном примере всем блокам для свойства `align-items` задано значение `flex-start`, а третьему блоку - `align-self` в значении `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; }`

:

## Пример . Выравнивание по началу вертикальной оси в гриде

Давайте установим выравнивание для первого элемента по началу вертикальной оси:

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

:

## Пример . Выравнивание по центру вертикальной оси в гриде

Давайте установим выравнивание первого элемента по центру вертикальной оси:

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

:

## Пример . Выравнивание по концу вертикальной оси в гриде

Давайте установим выравнивание для нашего первого элемента в гриде по концу вертикальной оси:

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

:

## Смотрите также

- свойство `flex-direction`,
  которое задает направление осей flex блоков
- свойство `justify-content`,
  которое задает выравнивание по главной оси
- свойство `align-items`,
  которое задает выравнивание по поперечной оси
- свойство `flex-wrap`,
  которое многострочность flex блоков
- свойство `flex-flow`,
  сокращение для flex-direction и flex-wrap
- свойство `order`,
  которое задает порядок flex блоков
- свойство `flex-basis`,
  которое задает размер конкретного flex блока
- свойство `flex-grow`,
  которое задает жадность flex блоков
- свойство `flex-shrink`,
  которое задает сжимаемость flex блоков
- свойство `flex`,
  сокращение для `flex-grow`, `flex-shrink` и `flex-basis`

← →
↑
en ru