Свойство place-content

Описание

Сокращённое свойство place-content одновременно устанавливает значения свойств align-content и justify-content.

Синтаксис

place-content: align-content justify-content;

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #container {
 display: flex;
 height: 240px;
 width: 240px;
 flex-wrap: wrap;
 background-color: #8c8c8c;
 writing-mode: horizontal-tb; /* Can be changed in the live sample */
 direction: ltr; /* Can be changed in the live sample */
 place-content: flex-end center; /* Can be changed in the live sample */
 }
 div > div {
 border: 2px solid #8c8c8c;
 width: 50px;
 background-color: #a0c8ff;
 }
 .small {
 font-size: 12px;
 height: 40px;
 }
 .large {
 font-size: 14px;
 height: 50px;
 }
 </style>
 <div id='container'>
 <div class='small'>Lorem</div>
 <div class='small'>Lorem<br />ipsum</div>
 <div class='large'>Lorem</div>
 <div class='large'>Lorem<br />impsum</div>
 <div class='large'></div>
 <div class='large'></div>
 </div>
</body>
</html>
Lorem
Lorem
ipsum
Lorem
Lorem
impsum

Читайте также

Свойство text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

Селекторы атрибутов со значениями через дефис

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создав...

Свойство transform

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, ...

Селекторы атрибутов со значениями в начале

Устанавливает стиль для элемента в том случае, если значение атрибута начинается с указанного тек...

Свойство max-height

Устанавливает максимальную высоту элемента.<br><br>Значение высоты элемента будет выч...