CSS - Свойство justify-self: Мастерство выравнивания элементов сетки

Здравствуйте, будущие маги CSS! Сегодня мы окунемся в магический мир свойства justify-self. Как ваш доброжелательный邻居-компьютерный учитель, я здесь, чтобы провести вас через это захватывающее путешествие. Так что возьмите свои виртуальные палочки (клавиатуры) и начнем колдовать CSS!

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

Прежде чем углубиться в Details, давайте поймем, что на самом деле делает justify-self. Представьте, что у вас есть контейнер сетки, и внутри него есть различные элементы сетки. Свойство justify-self позволяет вам выравнивать эти отдельные элементы по вертик. (горизонт.) оси. Это как если бы у каждого элемента был свой личный стилист, чтобы решить, где он должен стоять в свете софита!

Синтаксис и возможные значения

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

.grid-item {
justify-self: value;
}

Теперь давайте посмотрим на все возможные значения:

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

Вау, это quite a list! Не волнуйтесь, если это кажется подавляющим; мы разберем это с примерами.

Применяется к

Прежде чем мы перейдем к примерам, важно отметить, что justify-self применяется к:

• Элементам сетки
• Абсолютно позиционированным элементам, чей контейнер-блок является контейнером сетки

Теперь давайте рассмотрим каждое значение с практическими примерами!

CSS justify-self - значение auto

.grid-item {
justify-self: auto;
}

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

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

.grid-item {
justify-self: normal;
}

normal является значением по умолчанию и обычно действует как stretch для элементов сетки. Это "я чувствую себя幸运" среди значений justify-self!

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

.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

.grid-item {
justify-self: stretch;
background-color: lightblue;
}

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

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

.grid-item {
justify-self: start;
}

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

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

.grid-item {
justify-self: end;
}

Противоположное start, это đẩy элемент к концу ячейки. Это как элемент играет в прятки за правой стеной.

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

.grid-item {
justify-self: center;
}

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

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

.grid-item {
justify-self: flex-start; /* или flex-end */
}

Эти значения аналогичны start и end, но обычно используются в контекстах flex. В сеточных макетах они обычно ведут себя так же, как start и end.

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

.grid-item {
justify-self: self-start; /* или self-end */
}

Эти выравнивают элемент на основе его собственного направления. Если направление элемента ltr (слева направо), self-start будет таким же, как start. Это как у элемента есть компас, всегда указывающий на его личный север!

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

.grid-item {
justify-self: left; /* или right */
}

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

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

.grid-item {
justify-self: baseline; /* или last baseline */
}

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

Собираем все вместе

Теперь, когда мы рассмотрели все эти значения, давайте создадим забавный пример, который демонстрирует несколько значений justify-self в действии:

<div class="grid-container">
<div class="grid-item start">Start</div>
<div class="grid-item end">End</div>
<div class="grid-item center">Center</div>
<div class="grid-item stretch">Stretch</div>
</div>

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

.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

.start { justify-self: start; }
.end { justify-self: end; }
.center { justify-self: center; }
.stretch { justify-self: stretch; }

В этом примере у нас есть контейнер сетки с четырьмя элементами, каждый из которых демонстрирует другое значение justify-self. Это как little CSS fashion show, где каждый элемент демонстрирует свою уникальную манеру!

И вот и все, мои дорогие студенты! Мы прошли через страну justify-self, исследуя его многие грани и возможности. Помните, что CSS - это все о экспериментах и creativity. Не бойтесь смешивать и сочетать эти значения, чтобы создавать уникальные макеты.

Пока мы заканчиваем этот урок, я вспоминаю мудрого старого CSS мага, который однажды сказал: "С великой силой приходит великая ответственность... создавать awesome макеты!" Так что идите вперед, экспериментируйте, и пусть ваши сетки всегда будут идеально выровнены!

Credits: Image by storyset