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.

Подсказки

Секция статьи "Подсказки"