CSS свойство align-self

❮ Назад Вперед ❯

CSS свойство align-self используется для выравнивания выбранных элементов текущей флекс-линии и переопределения значений свойства align-items .

Свойство игнорируется, если для какого-либо flex-элемента установлено свойство margin со значением "auto".

Свойство align-self имеет те же значение, что и свойство align-items:

auto
stretch
flex-start
flex-end
center
baseline

Значение по умолчанию	auto
Применяется	К флекс-элементам, грид-элементам и абсолютно позиционированным блокам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.alignSelf = "auto";

Синтаксис

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      section {
      display: flex;
      align-items: center;
      height: 120px;
      padding: 10px;
      background: #99caff;
      }
      div {
      height: 60px;
      background: #1c87c9;
      margin: 5px;
      }
      div:nth-child(1) {
      align-self: flex-start;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства align-self</h2>
    <p>Для первого блока установлено свойство align-self со значением "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Попробуйте сами!

Пример, где использованы три блока. Второй блок установлен при помощи значения "flex-end":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      section {
      display: flex;
      align-items: center;
      height: 120px;
      padding: 10px;
      background: #99caff;
      }
      div {
      height: 60px;
      background: #1c87c9;
      margin: 5px;
      }
      div:nth-child(2) {
      align-self: flex-end;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства align-self</h2>
    <p>Для второго блока установлено значение "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Элемент наследует свойство align-items его родительского контейнера. Значение по умолчанию.
stretch	Элемент растягивается таким образом, чтобы заполнить контейнер.
center	Элементы расположены в центре контейнера.
flex-start	Элементы расположены в начале контейнера.
flex-end	Элементы расположены в конце контейнера.
baseline	Элементы выравниваются по базовой линии контейнера.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.


29.0+ 21-28 -webkit-	28.0+	9.0+ 6.1-8.0 -webkit-	12.1+

29.0+
21-28 -webkit-

28.0+

9.0+
6.1-8.0 -webkit-

12.1+

CSS свойство align-self

Синтаксис

Пример

Пример

Значения

Поддержка браузера

Практикуйте свои знания