place-items

Свойство CSS place-items сокращённое свойство выравнивает элементы сразу по направлениям блока и строки. Оно задаёт значения свойств align-items и justify-items. Если второе значение не задано, то используется первое.

Попробуйте

Составные свойства

Это сокращённое свойство для следующих свойств CSS:

Синтаксис

/* Positional alignment */
place-items: center;
place-items: normal start;
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
place-items: anchor-center;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: revert-layer;
place-items: unset;

Значения

Одна из следующих форм:

Одно значение align-items, которое используется для выравнивания по блоку и строке.
Значение align-items, задающее выравнивание по направлению блока, за которым следует значение justify-items, задающее выравнивание по направлению строки.

Формальное определение

Начальное значение	как каждое из свойств сокращения: `align-items`: `normal` `justify-items`: `legacy`
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как каждое из свойств сокращения: `align-items`: как указано `justify-items`: как указано
Тип анимации	дискретный

Формальный синтаксис

place-items = 
  <'align-items'> <'justify-items'>?  

<align-items> = 
  normal                                    |
  stretch                                   |
  <baseline-position>                       |
  [ <overflow-position>? <self-position> ]  |
  anchor-center                             

<justify-items> = 
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  legacy                                              |
  legacy && [ left | right | center ]                 |
  anchor-center                                       

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

Примеры

Размещение элементов в контейнере flex

В flexbox justify-self или justify-items не применяются, так как элементы на главной оси рассматриваются как группа. Поэтому второе значение будет проигнорировано.

CSS

#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
  display: flex;
}

Результат

Размещение элементов в контейнере сетки

В следующем контейнере сетки элементы меньше областей сетки, в которые они помещаются, поэтому place-items будет перемещать их по направлениям блока и строки.

CSS

#grid-container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#grid-container > div {
  width: 50px;
}

Результат

Спецификации

Спецификация
CSS Box Alignment Module Level 3 # place-items-property

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`place-items`	59	79	45	46	11	59	45	43	11	7.0	59
`anchor-center`	125	125	Нет	111	Нет	125	Нет	83	Нет	27.0	125
`flex_context`	59	79	45	46	11	59	45	43	11	7.0	59
`grid_context`	59	79	45	46	11	59	45	43	11	7.0	59

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items