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

Рекомендации по курсам:

свойство place-items не применяется к гибкому макету. Поэтому, если используется гибкий макет с Описание и использование

• Worth property is used for grid layout and is an abbreviation of the following properties:
• свойство,

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

place-items: start center;

• Worth property has the value 'start'
• Worth property has the value 'center'

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

#container {

• тогда значения свойств align-items и justify-items будут 'end'

Пример

Пример

Пример 1

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

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

place-items: start;

Пример 2: Режим написания Когда сетка контейнера writing-mode

Когда свойство writing-mode установлено в 'vertical-rl', конечное положение блочного направления смещается из нижней части в левую, конечное положение.inline-направления смещается из правой в нижнюю часть:
  #container {
  place-items: end;
}

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

writing-mode: vertical-rl;

свойство, Пример 3: Гибкий макет свойство place-items не применяется к гибкому макету. Поэтому, если используется гибкий макет с свойство,свойство, второе значение (то есть второе значение) будетignore.

#wrapper {
  place-items: stretch end;
}

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

Синтаксис CSS

place-items: normal legacy|value|initial|inherit;

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

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

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

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

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

Урок:Макетная сетка CSS

Урок:Эластичное макетирование CSS

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

См. также:Свойство CSS justify-items

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