Свойство 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

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

Свойство min-height

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

Стили к элементам указанного типа

Псевдокласс :nth-of-type используется для добавления стиля к элементам на основе нумерации в дере...

Свойство accent-color

Свойство accent-color определяет цвет акцента для некоторых элементов формы. Акцентом в данном сл...

Задает определенные настроки для разных языков

Определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :lang...

Стиль включенных элементов интерфейса

Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флаж...