CSS - Flexbox: руковод BEGINNER'S GUIDE TO FLEXIBLE BOX LAYOUT

Привет, будущие мастера CSS! Я рад стать вашим проводником в этом захватывающем путешествии в мир CSS Flexbox. Как alguien, кто уже давно преподаёт компьютерные науки, я могу告诉你, что Flexbox - это один из тех инструментов, которые кардинально изменят твою жизнь в веб-дизайне. Так что, погружаемся в это!

Что такое CSS Flexbox?

Представь, что ты расставляешь мебель в комнате. Ты хочешь, чтобы все идеально подходило, но также хочешь гибкость для легкого передвижения вещей. Именно это делает CSS Flexbox для веб-разметки! Это модель разметки, которая позволяет проектировать гибкие адаптивные структуры разметки без использования float или позиционирования.

Flexbox позволяет легко:

• Выравнивать элементы вертикально и горизонтально
• Переставлять элементы, не изменяя HTML
• Создавать гибкие контейнерные элементы

Элементы Flexbox

Прежде чем мы начнем кодить, давайте поймем два основных компонента Flexbox:

1. Flex Container: Это родительский элемент, который содержит все flex-элементы.
2. Flex Items: Это дочерние элементы внутри flex-контейнера.

Представь это как коробку (контейнер) с игрушками (элементами) внутри. Способ расстановки этих игрушек зависит от того, как ты настроишь свои Flexbox-свойства.

Основной Flexbox Layout

Давайте начнем с простого примера:

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

.flex-container {
display: flex;
}

.flex-item {
padding: 20px;
background-color: #f1f1f1;
margin: 10px;
}

В этом примере мы создали flex-контейнер с тремя flex-элементами внутри. Свойство display: flex; на контейнере активирует Flexbox.

Вертикальный Flexbox Layout

Хочешь сложить свои элементы вертикально? Это так просто!

.flex-container {
display: flex;
flex-direction: column;
}

Свойство flex-direction: column; изменяет основную ось на вертикальную, складывая твои элементы сверху вниз.

Свойство Flexbox Justify Content

Теперь давайте поговорим о позиционировании. Свойство justify-content выравнивает элементы горизонтально и принимает следующие значения:

Значение	Описание
flex-start	Элементы упакованы к началу flex-direction
flex-end	Элементы упакованы к концу flex-direction
center	Элементы centered по линии
space-between	Элементы равномерно распределены по линии
space-around	Элементы равномерно распределены с равным пространством

.flex-container {
display: flex;
justify-content: space-between;
}

Это распределит твои элементы равномерно по контейнеру.

Свойство Flexbox Align Items

While justify-content работает по основной оси, align-items работает по поперечной оси. Оно принимает следующие значения:

Значение	Описание
stretch	Элементы растянуты для соответствия контейнеру (по умолчанию)
flex-start	Элементы placed в начале поперечной оси
flex-end	Элементы placed в конце поперечной оси
center	Элементы centered в поперечной оси
baseline	Элементы выровнены так, чтобы их базовые линии совпадали

.flex-container {
display: flex;
align-items: center;
}

Это centrates все элементы вертикально внутри контейнера.

Выравнивание Div с помощью Flexbox

Вот полезный трюк: выравнивание div как горизонтально, так и вертикально с Flexbox - это breeze!

.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* или любая высота */
}

Свойство Flexbox Wrap

Иногда ты можешь захотеть, чтобы твои элементы перешли на следующую строку, если они не помещаются. Вот где comes flex-wrap:

.flex-container {
display: flex;
flex-wrap: wrap;
}

Это позволяет элементам перейти на следующую строку, если нет足够 места.

Свойство Flexbox Align Self

Что, если ты хочешь выровнять только один элемент по-другому? align-self на помощь!

.flex-item:nth-child(2) {
align-self: flex-end;
}

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

Свойства контейнера CSS Flexbox

Вот таблица всех свойств Flexbox, которые ты можешь применить к контейнеру:

Свойство	Описание
display	Определяет flex-контейнер
flex-direction	Определяет направление flex-элементов
flex-wrap	Указывает, должны ли flex-элементы обертываться
flex-flow	Сокращение для flex-direction и flex-wrap
justify-content	Выравнивает flex-элементы по основной оси
align-items	Выравнивает flex-элементы по поперечной оси
align-content	Выравнивает flex-линии, когда в контейнере есть extra пространство

Свойства элементов CSS Flexbox

А вот свойства, которые ты можешь применить к flex-элементам:

Свойство	Описание
order	Указывает порядок flex-элемента
flex-grow	Указывает, насколько flex-элемент будет растиrelative к остальным
flex-shrink	Указывает, насколько flex-элемент будет уменьшатьсяrelative к остальным
flex-basis	Указывает начальную длину flex-элемента
flex	Сокращение для flex-grow, flex-shrink и flex-basis
align-self	Указывает выравнивание для конкретного flex-элемента

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

Не бойся экспериментировать с этими свойствами. Лучший способ учиться - это делать. Попробуй создать разные макеты, поиграй с свойствами и посмотри, что произойдёт. Before you know it, ты будешь создавать красивые, гибкие макеты с лёгкостью!

Счастливого flexing, будущие мастера CSS!

Credits: Image by storyset