CSS - Свойство justify-items

Здравствуйте, начинающие веб-разработчики! Сегодня мы окунемся в奇妙ный мир CSS и рассмотрим Свойство, которое может сделать ваши макеты такими, словно их создал опытный профессионал. Я говорю о свойстве justify-items. Поверьте мне, к концу этого учебника вы будете выравнивать элементы как Верховный судья! ?

Что такое justify-items?

Прежде чем мы углубимся в детали, давайте поймем, что делает justify-items. Представьте себе контейнер с сеткой, заполненный милыми маленькими элементами сетки. Свойство justify-items похоже на магическую палочку, которая позволяет вам контролировать, как эти элементы выравниваются по вертикальной (обычно горизонтальной) оси в их зонах сетки.

Синтаксис

Основной синтаксис для justify-items довольно прост:

.container {
justify-items: значение;
}

Где значение может быть одним из множества вариантов, которые мы рассмотрим чуть позже. Но сначала давайте создадим простую сетку, чтобы поиграть:

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}

.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

Это создает 2x2 сетку с четырьмя элементами. Теперь давайте рассмотрим различные значения, которые мы можем использовать с justify-items!

Возможные значения

Вот таблица всех возможных значений для justify-items:

Значение	Описание
normal	Значение по умолчанию, обычно действует как stretch
stretch	Расширяет элементы, чтобы заполнить зону сетки
start	Выравнивает элементы в начале зоны сетки
end	Выравнивает элементы в конце зоны сетки
center	Выравнивает элементы по центру зоны сетки
flex-start	Выравнивает элементы в начале (для контейнеров flex)
flex-end	Выравнивает элементы в конце (для контейнеров flex)
self-start	Выравнивает элементы по своему началу
self-end	Выравнивает элементы по своему концу
left	Выравнивает элементы слева
right	Выравнивает элементы справа
baseline	Выравнивает элементы по их базовой линии
last baseline	Выравнивает элементы по их последней базовой линии
safe center	Выравнивает элементы безопасно (предотвращает потерю данных)
legacy right	Выравнивание справа (поддержка legacy)

Теперь давайте разберем эти значения с примерами!

CSS justify-items - значение normal

.grid-container {
justify-items: normal;
}

Значение normal является значением по умолчанию. В большинстве случаев оно behaves как stretch. Это как если бы вы говорили своим элементам сетки: "Будь самим собой!"

CSS justify-items - значение stretch

.grid-container {
justify-items: stretch;
}

Со значением stretch ваши элементы будут распространяться, чтобы заполнить весь размер их зоны сетки. Это как если бы вы говорили своим элементам "Глубоко подыши и расшириься!"

CSS justify-items - значение start

.grid-container {
justify-items: start;
}

Значение start выравнивает ваши элементы в начале их зоны сетки. Представьте это как выстраивание ваших элементов на линии старта гонки.

CSS justify-items - значение end

.grid-container {
justify-items: end;
}

Напротив, end толкает ваши элементы к концу их зоны сетки. Это как если бы ваши элементы пытались дотронуться до финишной линии!

CSS justify-items - значение center

.grid-container {
justify-items: center;
}

center делает exactly то, что вы ожидаете – оно центрирует ваши элементы в их зоне сетки. Это идеально для создания сбалансированного, zen-подобного макета.

CSS justify-items - значения flex-start и flex-end

.grid-container {
justify-items: flex-start;
}

.grid-container {
justify-items: flex-end;
}

Эти значения аналогичны start и end, но они предназначены только для контейнеров flex. Они как cool cousins start и end, которые приходят только на flex вечеринки.

CSS justify-items - значения self-start и self-end

.grid-container {
justify-items: self-start;
}

.grid-container {
justify-items: self-end;
}

Эти значения выравнивают элементы по своему началу или концу, что может быть отличным от начала или конца контейнера в некоторых写作 режимах. Это как если бы каждый элемент решил, на какой стороне кровати он хочет спать!

CSS justify-items - значения left и right

.grid-container {
justify-items: left;
}

.grid-container {
justify-items: right;
}

Эти значения делают exactly то, что они говорят – выравнивают элементы слева или справа. Простые и понятные, как хорошая чашка кофе утром.

CSS justify-items - значения baseline и last baseline

.grid-container {
justify-items: baseline;
}

.grid-container {
justify-items: last baseline;
}

Эти значения выравнивают элементы по их базовой линии или последней базовой линии. Это особенно полезно, когда у вас есть текст разных размеров и вы хотите, чтобы они выстраивались nice.

CSS justify-items - значение safe center

.grid-container {
justify-items: safe center;
}

Это значение центрирует элементы, но обеспечивает, чтобы не occurred потеря данных. Это как если бы у вас была safety net для ваших centrированных элементов!

CSS justify-items - значение legacy right

.grid-container {
justify-items: legacy right;
}

Это значение предназначено для обратной compatibility. Это как если бы вы хранили старый флип-телефон – вы, возможно, не будете его использовать, но он есть, если вам нужно!

И вот вы и рассмотрели все! Вы только что совершили быстрый тур по свойству justify-items. Помните, ключ к овладению CSS – это практика. Итак, идите вперед, экспериментируйте с этими значениями и создавайте美丽的 выровненные макеты. Before вы знаете это, вы будете выравнивать элементы во сне!

Счастливого кодирования, и пусть ваши сетки всегда будут идеально выровнены! ??‍??‍?

Credits: Image by storyset