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

Определение и использование

place-self Свойство используется для выравнивания отдельного элемента сетки и является сокращением следующих свойств:

Если свойство 'place-self' имеет два значения:

place-self: start center;
  • значение свойства 'align-self' равно 'start'
  • значение свойства 'justify-self' равно 'center'

Если свойство 'place-self' имеет только один значение:

place-self: end;
  • значения свойств 'align-self' и 'justify-self' равны 'end'

Пример

Пример 1

Выравнивать отдельный элемент сетки в направлении блока и строки к концу-position:

#myDiv {
  place-self: end;
}

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

Пример 2: режим написания

Когда для элемента '<div>' задан writing-mode При установке значения 'vertical-rl' для свойства 'grid-cell', позиция завершения ячейки в направлении блока смещается с нижней стороны на левую, а в направлении строки - с правой стороны на нижнюю:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

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

пример 3: гибкая сетка

place-self атрибут также можно использовать для элементов гибкой сетки, но justify-self второй параметр будет проигнорирован, так как он не подходит для гибкой сетки:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

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

CSS синтаксис

place-self: auto|value|initial|inherit;

Значение атрибута

Значение Описание
auto по умолчанию. Значение place-self по умолчанию для элементов.
normal

зависит от контекста布局а, но для элементов сетки, размер которых не установлен, их поведение подобно 'stretch' в сеточном макете.

Если размер установлен, поведение значения атрибута подобно 'start'.
stretch Если размер не установлен, то элемент растягивается, чтобы заполнить ячейку сетки.
start Выравнивает элементы по началу в направлении строки и блока.
left Выравнивает элементы по левому краю в направлении строки, как значение свойства justify-self.
center Выравнивает элементы по центру.
end Выравнивает элементы по концу в направлении строки и блока.
right Выравнивает элементы по правому краю в направлении строки, как значение свойства justify-self.
overflow-alignment

'safe': если содержимое выходит за пределы, то выравнивание элемента устанавливается в 'start'

'unsafe': выравнивающее значение поддерживается независимо от того, выходит ли содержимое за пределы, или нет
базовая выравнивающая линия Элементы выравниваются по базовой линии с родительским элементом.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Инherit от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: auto
Унаследованность: нет
Создание анимации: Не поддерживается. См. также:Атрибуты, связанные с анимацией.
Версия: CSS3
JavaScript синтаксис: object.style.placeSelf="end stretch"

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

Числа в таблице представляют собой версии первых браузеров, полностью поддерживающих этот атрибут.

Chrome Edge Firefox Safari Opera
59.0 79.0 45.0 11.0 46.0

соответствующие страницы

Урок:CSS grid layout

Урок:CSS flexbox layout

См. также:Свойство align-self CSS

См. также:Атрибут CSS justify-self

См. также:Свойство writing-mode в CSS