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

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

Свойство align-self является одним из свойств CSS3.

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

auto
stretch
flex-start
flex-end
center
baseline

INFO

Это свойство будет проигнорировано, если вертикальный отступ (margin) flex-элемента установлен в "auto". Свойство align-self не применяется к ячейкам таблиц или блочным элементам.

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

Синтаксис

Синтаксис свойства CSS align-self

css

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

Пример свойства align-self:

Пример свойства CSS align-self со значением flex-start

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</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 property example</h2>
    <p>Here the align-self for the first box is set to "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Try it Yourself »

Результат

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

Ниже приведен пример, где используются три блока, а второй имеет значение "flex-end".

Пример свойства align-self со значением "flex-end":

Пример свойства CSS align-self со значением flex-end

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</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 property example</h2>
    <p>Here the align-self for the second box is set to "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Try it Yourself »

Значения

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

Practice

Что делает свойство 'align-self' в CSS?

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

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

Синтаксис ​

Пример свойства align-self: ​

Результат ​

Пример свойства align-self со значением "flex-end": ​

Значения ​

Practice ​

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

Синтаксис

Пример свойства align-self:

Результат

Пример свойства align-self со значением "flex-end":

Значения

Practice