Свойство place-content в CSS
- Предыдущая страница perspective-origin
- Следующая страница place-items
Определение и использование
place-content
Свойства используются для布局 эластичного контейнера (flexbox) и сетки (grid) и являются сокращением следующих свойств:
Если свойство place-content имеет два значения:
place-content: start center;
- Значение свойства align-content 'start'
- Значение свойства justify-content 'center'
Если свойство place-content имеет только один значение:
place-content: end;
- Значения свойств align-content и justify-content должны быть 'end'
Пример
Пример 1
Установите эластичность в нижней части эластичного контейнера и равномерно распределите расстояние между эластичными элементами по горизонтали:
#container { display: flex; place-content: end space-between;
Пример 2: сеточное форматирование
Дополнительное пространство в направлении блока равномерно распределено вокруг каждого сеточного элемента, и сеточные элементы выравниваются по центру в направлении строки:
#container { display: grid; place-content: space-around center;
CSS синтаксис
place-content: normal|value|initial|inherit;
Значение свойства
Значение | Описание |
---|---|
normal |
Значение по умолчанию. Зависит от контекста布局а. Эквивалентно не установленных значений для align-content и justify-content. |
stretch |
Сетка: если размер не установлен, то сеточные элементы растягиваются, чтобы заполнить сеточный контейнер. Эластичный контейнер: если размер эластичного элемента не указан в перекрестной оси, то он растягивается, чтобы заполнить эластичный контейнер. |
start | Элементы выравниваются по началу контейнера. |
end | Элементы выравниваются по концу контейнера. |
center | Элементы выравниваются по центру контейнера. |
space-between | Произвольное распределение доступного пространства по двум осям контейнера, чтобы расстояние между элементами было одинаковым. |
space-around | Произвольное распределение доступного пространства по двум осям контейнера, чтобы расстояние вокруг каждого элемента было одинаковым. |
space-evenly | Произвольное распределение элементов по двум осям контейнера. |
overflow-alignment |
'safe': если контент выходит за пределы, то выравнивание элементов устанавливается в 'start'. 'unsafe': значение остается неизменным, независимо от того, выходит ли контент за пределы. |
initial | Этот атрибут устанавливается в значение по умолчанию. См. также: initial. |
inherit | Этот атрибут наследуется от родительского элемента. См. также: inherit. |
Технические детали
Значение по умолчанию: | normal |
---|---|
Инheritability: | Нет |
Создание анимации: | Не поддерживается. См. также:Свойства анимации. |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.placeContent="end space-around" |
Поддержка браузеров
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
59.0 | 79.0 | 53.0 | 11.0 | 46.0 |
Связанные страницы
Учебник:CSS сеточное форматирование
Учебник:CSS эластичное блоковое форматирование
Ссылка:Свойство align-content CSS
Ссылка:Свойство CSS justify-content
- Предыдущая страница perspective-origin
- Следующая страница place-items