CSS - place-content: friendly guide for beginners

Привет, будущая суперзвезда веб-дизайна! ? Готовы окунуться в чудесный мир CSS? Сегодня мы рассмотрим полезное свойство под названием place-content. Поверьте мне, это значительно упростит вашу жизнь при попытках выровнять элементы в ваших веб-макетах. Так что возьмите кружку кофе (или чая, если это ваш выбор) и начнем!

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

Представьте, что вы расставляете мебель в комнате. Вы хотите, чтобы все выглядело идеально, но.moveeach предмет по отдельности - это мука. Вот где на помощь приходит place-content - это как магическая палочка, которая помогает вам расставлять элементы на вашей веб-странице с легкостью!

Свойство place-content - это сокращение для установки align-content и justify-content одним махом. Это как убить двух зайцев одним выстрелом (но не волнуйтесь, ни одного пернатого существа не пострадало при создании этого свойства CSS ?).

Possible Values

О, у нас есть plentyoptions! Давайте разберем их в удобной для чтения таблице:

Значение	Описание
center	Выравнивает содержимое по вертикане и горизонтали
start	Выравнивает содержимое в начале контейнера
end	Выравнивает содержимое в конце контейнера
flex-start	Подобно start, но для flex-контейнеров
flex-end	Подобно end, но для flex-контейнеров
baseline	Выравнивает содержимое по базовой линии
space-between	Распределяет элементы evenly с промежутками между ними
space-around	Распределяет элементы evenly с промежутками вокруг них
space-evenly	Распределяет элементы с равными промежутками между и вокруг них

Не волнуйтесь, если это покажется вам сложным - мы рассмотрим каждый из них с примерами!

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

Прежде чем углубиться в детали, важно знать, где мы можем использовать place-content. Это свойство применяется к:

• Grid-контейнерам
• Flex-контейнерам

Так что, если вы работаете с сетками или flexbox (а вы будете это делать), place-content - ваш новый лучший друг!

Синтаксис

Основной синтаксис для place-content очень прост:

.container {
place-content: <align-content> <justify-content>;
}

Вы можете использовать одно или два значения. Если вы используете одно, оно применяется к обоим направлениям выравнивания. Если вы используете два, первое для align-content (вертикальное выравнивание) и второе для justify-content (горизонтальное выравнивание).

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

CSS place-content - center start Value

.container {
display: grid;
place-content: center start;
height: 200px;
border: 2px solid #333;
}

В этом примере содержимое будет выровнено по вертикане, но выровнено в начале (слева в языках с левосторонним текстом) по горизонтали. Это как pushingall вашу мебель в одну сторону комнаты, но оставляя ее в центре вертикане.

CSS place-content - start center Value

.container {
display: flex;
place-content: start center;
height: 200px;
border: 2px solid #333;
}

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

CSS place-content - end right Value

.container {
display: grid;
place-content: end right;
height: 200px;
border: 2px solid #333;
}

Это đẩy все ваше содержимое в правый нижний угол контейнера. Это как сунуть всю вашу мебель в один угол комнаты (но я не рекомендую делать это в реальной жизни ?).

CSS place-content - flex-start center Value

.container {
display: flex;
place-content: flex-start center;
height: 200px;
border: 2px solid #333;
}

Подобно start center, но специально для flex-контейнеров. Ваше содержимое будет вверху (или слева в column direction) и выровнено по горизонтали.

CSS place-content - flex-end center Value

.container {
display: flex;
place-content: flex-end center;
height: 200px;
border: 2px solid #333;
}

Это как flex-start center, но выравнивает в конце flex-контейнера вместо начала.

CSS place-content - last baseline Value

.container {
display: grid;
place-content: last baseline;
height: 200px;
border: 2px solid #333;
}

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

CSS place-content - space-between Value

.container {
display: flex;
place-content: space-between;
height: 200px;
border: 2px solid #333;
}

Это распределяет элементы evenly, с первым элементом в начале и последним в конце. Представьте, что вы расставляете мебель в комнате с равными промежутками между каждым предметом, но pushed к краям.

CSS place-content - space-around Value

.container {
display: grid;
place-content: space-around;
height: 200px;
border: 2px solid #333;
}

Подобно space-between, но также добавляет промежуток перед первым и после последнего элемента. Это как giveкаждому предмету мебели свое littlearea в комнате.

CSS place-content - space-evenly Value

.container {
display: flex;
place-content: space-evenly;
height: 200px;
border: 2px solid #333;
}

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

И вот и все! Вы только что узнали о свойстве place-content и его различных значениях. Помните, что практика makesperfect, так что не бойтесь экспериментировать с этими в своих проектах. Beforeyou know it, вы будете выравнивать содержимое как профи!

Продолжайте кодить, продолжайте учиться, и, самое главное, получайте удовольствие от этого! ??‍??‍?

Credits: Image by storyset