Клавиша / esc

place-self

Шорткат для выравнивания отдельного элемента внутри грид-контейнера.

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

Кратко

Шорткат для одновременного указания значений для свойств justify-self и align-self.

Пример

Элемент с классом .item1 прижмётся к верхней горизонтальной границе и правой вертикальной границе ячейки:

        
          
          .container {  justify-items: stretch;}.item1 {  place-self: start end;}
          .container {
  justify-items: stretch;
}

.item1 {
  place-self: start end;
}

        
        
          
        
      

Как пишется

  • auto (значение по умолчанию) — стандартное значение, можно использовать для сброса ранее заданных значений.
  • align-self justify-self — первое значение указывает на значение свойства align-self, второе значение устанавливает значение свойства justify-self. Если указано всего одно значение, то оно устанавливается в качестве значения для обоих свойств. Например, place-self: center выровняет элемент по центру по горизонтальной и по вертикальной осям одновременно.

Подсказки

Поддержка в браузерах:
  • Chrome 57, поддерживается
  • Edge 16, поддерживается
  • Firefox 52, поддерживается
  • Safari 10.1, поддерживается
О Baseline