Свойство CSS justify-items
Свойство CSS justify-items задаёт выравнивание элементов сетки по строчной (горизонтальной) оси. Все значения и живые примеры.
Свойство CSS justify-items задаёт выравнивание по умолчанию для всех элементов внутри контейнера вдоль строчной (горизонтальной) оси — в языках с направлением письма слева направо это горизонтальное направление. Свойство устанавливается на контейнере и действует как justify-self по умолчанию сразу для всех его дочерних элементов. Каждый отдельный элемент по-прежнему может переопределить это значение с помощью собственного justify-self.
В CSS Grid свойство justify-items управляет тем, где каждый элемент располагается горизонтально внутри своей ячейки сетки — у левого края, у правого, по центру или растянут на всю ячейку. Сопутствующее свойство align-items делает то же самое вдоль блочной (вертикальной) оси, а сокращённое place-items устанавливает оба значения в одном объявлении.
Когда применять
Используйте justify-items, когда у вас есть сетка и вы хотите, чтобы все ячейки имели одинаковое горизонтальное выравнивание без написания justify-self для каждого элемента. Типичные случаи:
- Центрирование содержимого каждой ячейки сетки (
center). - Прижатие ячеек к начальному или конечному краю (
start/end). - Растягивание элементов на всю ширину ячейки (
stretch— значение по умолчанию для сетки).
Примечание:
justify-itemsприменяется к контейнерам сетки и абсолютно позиционированным элементам. В Flexbox оно игнорируется — для распределения flex-элементов вдоль главной оси используйтеjustify-content.
| Начальное значение | auto |
|---|---|
| Применяется к | Контейнерам сетки и абсолютно позиционированным элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Syntax | object.style.justifyItems = "start"; |
Синтаксис
Значения CSS justify-items
justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;Пример: justify-items со значением "start"
Пример кода CSS justify-items
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: start;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Результат
При justify-items: start каждый элемент прижимается к левому краю своей ячейки сетки. Измените значение на center, end или stretch (ниже), чтобы увидеть, как элементы перемещаются внутри тех же ячеек.
Пример: justify-items со значением "center"
Пример CSS justify-items center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: center;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Пример: justify-items со значением "first-baseline"
Пример свойства justify-items со значением "first-baseline":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
display: grid;
padding-top: 10px;
height: 250px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
background: #ccc;
justify-items: first-baseline;
}
.item {
width: 50%;
height: 50%;
text-align: center;
}
.item1 {
background: red;
}
.item2 {
background: blue;
}
.item3 {
background: green;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>Пример: justify-items со значением "self-end"
Пример свойства justify-items со значением "self-end":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: self-end;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| auto | Если у блока нет родителя или он абсолютно позиционирован, значение auto соответствует normal. |
| normal | Эффект зависит от режима разметки: • Блочная разметка: ведёт себя как start. • Абсолютно позиционированная разметка: ведёт себя как start для замещаемых элементов и stretch для остальных. • Ячейки таблицы: игнорируется. • Flexbox: игнорируется. • CSS Grid: ведёт себя как stretch, кроме элементов с соотношением сторон или собственным размером — для них ведёт себя как start. |
| start | Все элементы выравниваются по начальному (левому) краю контейнера. |
| end | Все элементы выравниваются по конечному (правому) краю контейнера. |
| flex-start | Элементы размещаются в начале контейнера. |
| flex-end | Элементы размещаются в конце контейнера. |
| self-start | Элемент располагается у края контейнера со стороны своего начала. |
| self-end | Элемент располагается у края контейнера со стороны своего конца. |
| center | Элементы размещаются рядом друг с другом по центру контейнера. |
| left | Элементы размещаются рядом друг с другом у левого края контейнера. Если ось свойства не параллельна строчной оси, значение ведёт себя как end. |
| right | Элементы размещаются рядом друг с другом у правого края контейнера. Если ось свойства не параллельна строчной оси, значение ведёт себя как start. |
| baseline | Выравнивает все элементы группы по их базовым линиям выравнивания. |
| first-baseline | Выравнивает все элементы группы по первым базовым линиям выравнивания. |
| last-baseline | Выравнивает все элементы группы по последним базовым линиям выравнивания. |
| stretch | Растягивает элемент для заполнения контейнера вдоль строчной/главной оси. |
| safe | Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается так, как если бы использовалось значение start. |
| unsafe | Независимо от размера элемента и контейнера выравнивания указанное значение выравнивания соблюдается. |
| legacy | Устаревшее ключевое слово для обратной совместимости. Соответствует flex-start, flex-end или center в зависимости от режима разметки. Не влияет на наследование. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
justify-items и justify-self
Эти два свойства похожи, но применяются к разным элементам:
justify-itemsустанавливается на контейнере и задаёт горизонтальное выравнивание по умолчанию для всех его элементов.justify-selfустанавливается на отдельном элементе и переопределяет значениеjustify-itemsконтейнера только для этого элемента.
Распространённый паттерн — задать значение по умолчанию с помощью justify-items на сетке, а затем скорректировать один-два особых элемента с помощью justify-self.
justify-items и align-items
justify-items и align-items действуют по перпендикулярным осям:
justify-items→ строчная (горизонтальная) ось — горизонтальное размещение в документе с направлением письма слева направо.align-items→ блочная (вертикальная) ось — вертикальное размещение.
Чтобы задать оба значения сразу, используйте сокращённое place-items: place-items: <align-items> <justify-items>.
Поддержка браузерами
justify-items поддерживается во всех современных браузерах (Chrome, Edge, Firefox, Safari и Opera) как часть модуля выравнивания блоков CSS. Основной сценарий использования — выравнивание внутри CSS Grid — также широко поддерживается.