Клавиша / esc

align-self

Если элемент не хочет жить по правилам родителя, то его можно выровнять отдельно.

Время чтения: меньше 5 мин

Кратко

Скопировано

При помощи этого свойства можно выровнять один или несколько элементов по вертикальной оси иначе, чем задано у родительского элемента.

Пример

Скопировано

В этом примере у родителя задано выравнивание вложенных элементов по верхнему краю родителя. А для элемента с классом .item мы задаём выравнивание по нижнему краю.

        
          
          .container {  display: flex;  align-items: flex-start;}.item {  align-self: flex-end;}
          .container {
  display: flex;
  align-items: flex-start;
}

.item {
  align-self: flex-end;
}

        
        
          
        
      

Как понять

Скопировано

Иногда требуется все флекс-элементы выровнять по вертикальной оси одним образом, но один или несколько из них выровнять иначе.

Как пишется

Скопировано

Все значения этого свойства совпадают со значениями свойства align-items.

Подсказки

Скопировано
Поддержка в браузерах:
  • Chrome 66, поддерживается
  • Edge 79, поддерживается
  • Firefox 76, поддерживается
  • Safari 12.1, поддерживается
О Baseline