CSS - Свойство place-self: Пособие для начинающих

Здравствуйте, будущие мастера CSS! Сегодня мы окунемся в чудесный мир CSS и рассмотрим полезное маленькое свойство под названием place-self. Не волнуйтесь, если вы новички; я проведу вас через это шаг за шагом, как я делал это со своими студентами на протяжении многих лет. К концу этого руководства вы будете располагать элементы как профессионал!

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

Прежде чем мы полезем в воду с головой, давайте начнем с азов. Свойство place-self является сокращением для установки сразу и align-self, и justify-self в одном объявлении. Это как убить двух зайцев одним выстрелом, но гораздо более гуманно и связано с CSS!

Синтаксис

Синтаксис для place-self quite simple:

place-self: <align-self> <justify-self>;

Если вы предоставляете только одно значение, оно применяется и к align-self, и к justify-self. Это как заказать комбо-меню – вы получаете два блюда за цену одного!

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

Теперь давайте рассмотрим различные значения, которые мы можем использовать с place-self. Я представлю их в таблице, которую я считаю, помогает студентам легче усвоить информацию:

Значение	Описание
auto	Элемент наследует поведение align-self/justify-self родительского контейнера
normal	Элемент располагается согласно стандартному потоку документа
start	Выравнивает элемент в начале контейнера
end	Выравнивает элемент в конце контейнера
center	Центрирует элемент в контейнере
stretch	Растягивает элемент, чтобы он соответствовал контейнеру
flex-start	Выравнивает элемент в начале flex-контейнера
flex-end	Выравнивает элемент в конце flex-контейнера
self-start	Выравнивает элемент в начале собственной оси
self-end	Выравнивает элемент в конце собственной оси
baseline	Выравнивает элемент по базовой линии контейнера
first baseline	Выравнивает элемент по первой базовой линии контейнера
last baseline	Выравнивает элемент по последней базовой линии контейнера

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

Свойство place-self применяется к элементам сетки и flex-элементам. Это как особая сила, которую имеют только определенные супергерои (или в нашем случае, элементы)!

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

CSS place-self - normal start Значение

.item {
place-self: normal start;
}

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

CSS place-self - auto center Значение

.item {
place-self: auto center;
}

Здесь мы говорим: "Наследуй выравнивание от родителя, но centr yourself horizontally." Это идеально для случаев, когда вы хотите, чтобы ваш элемент шёл с потоком вертикально, но выделялся горизонтально.

CSS place-self - center normal Значение

.item {
place-self: center normal;
}

Это centrирует элемент вертикально, но оставляет его в стандартном потоке горизонтально. Представьте, что ваш элемент на вечеринке – он в центре комнаты, но всё ещё следует обычным правилам этикета!

CSS place-self - end normal Значение

.item {
place-self: end normal;
}

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

CSS place-self - start auto Значение

.item {
place-self: start auto;
}

Это располагает элемент в начале контейнера вертикально и наследует выравнивание горизонтально. Это как сказать: "Я начну сверху, но пойду с потоком горизонтально."

CSS place-self - self-start auto Значение

.item {
place-self: self-start auto;
}

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

CSS place-self - self-end normal Значение

.item {
place-self: self-end normal;
}

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

CSS place-self - flex-start auto Значение

.item {
place-self: flex-start auto;
}

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

CSS place-self - flex-end normal Значение

.item {
place-self: flex-end normal;
}

В flex-контейнере это выравнивает элемент в конце контейнера вертикально и оставляет его в стандартном потоке горизонтально. Это как ваш flex-элемент делает стойку!

CSS place-self - baseline normal Значение

.item {
place-self: baseline normal;
}

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

CSS place-self - last baseline normal Значение

.item {
place-self: last baseline normal;
}

Похоже на базовую линию, но использует последнюю базовую линию, если их несколько. Это как сделать sure ваш элемент имеет последнее слово!

CSS place-self - stretch auto Значение

.item {
place-self: stretch auto;
}

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

И вот оно,朋友们! Мы рассмотрели свойство place-self и его различные значения. Помните, ключ к maîtriser CSS – это практика. Так что вперед, экспериментируйте с этими значениями, mix and match, и посмотрите, какие красивые макеты вы можете создать!

За годы преподавания я заметил, что студенты, которые экспериментируют и весело проводят время с CSS, учатся быстрее и лучше запоминают материал. Так что не бойтесь быть креативными! Кто знает? Вы можете открыть kombinaciю, которая станет вашим фирменным стилем.

Счастливо кодите, и пусть ваши элементы всегда располагаются perfectly!

Credits: Image by storyset