Bootstrap - Flex: Полное руководство для начинающих

Здравствуйте, будущие веб-разработчики! Я рад быть вашим проводником в увлекательное путешествие в мир системы Flex из Bootstrap. Как某人, кто преподаёт информатику уже много лет, я могу заверить вас, что овладение Flex изменит вашу игру в веб-дизайне. Так что погружаемся и вместе разгадываем тайны Flex!

Что такое Bootstrap Flex?

Прежде чем мы начнём flex-ить наши кодовые мышцы (и да, это каламбур!), давайте поймём, что такое Bootstrap Flex. Flex - это мощная система компоновки в Bootstrap, которая позволяет создавать гибкие и адаптивные designs с лёгкостью. Это как магическая палочка, которая раскладывает ваши веб-элементы именно так, как вы хотите!

Включение flex-поведения

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

<div class="d-flex">
<!-- Ваши flex-элементы идут сюда -->
</div>

Эта простая класс d-flex делает ваш контейнер flex-контейнером. Всё, что находится внутри этого контейнера, становится flex-элементом. Круто, правда?

Направление

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

<div class="d-flex flex-row">
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
</div>

<div class="d-flex flex-column">
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
</div>

В этом примере flex-row располагает элементы горизонтально (слева направо), в то время как flex-column укладывает их вертикально (сверху вниз).

Выравнивание содержимого

Выравнивание содержимого в Flex похоже на раскладывание книг на полке. Вы можете их толкать влево, вправо, в центр или равномерно распределять. Давайте посмотрим, как это делается:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

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

Выравнивание элементов

While justify-content работает по главной оси, align-items dealing with the cross axis. Think of it as adjusting the height of books on a shelf. Here's how you can use it:

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

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

Выравнивание самого элемента

Иногда вы хотите, чтобы один элемент нарушил ranks и выровнялся по-другому. Вот где align-self comes in handy:

<div class="d-flex">
<div class="align-self-start">Start</div>
<div class="align-self-center">Center</div>
<div class="align-self-end">End</div>
</div>

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

Заполнение

Класс flex-fill похож на губку - он делает flex-элемент поглощать всё доступное пространство:

<div class="d-flex">
<div class="flex-fill">Flex-элемент с большим количеством содержимого</div>
<div class="flex-fill">Flex-элемент</div>
<div class="flex-fill">Flex-элемент</div>
</div>

Все элементы с flex-fill будут иметь одинаковую ширину, независимо от их содержимого.

Увеличение и сжатие

Свойства увеличения и сжатия контролируют, как flex-элементы расширяются или сужаются. Это как иметь резиновые ленты в вашем макете:

<div class="d-flex">
<div class="flex-grow-1">Увеличивается</div>
<div>Фиксированный</div>
<div class="flex-shrink-1">Сжимается</div>
</div>

Элемент с flex-grow-1 будет увеличиваться, чтобы заполнить доступное пространство, в то время как flex-shrink-1 будет сжиматься, если это необходимо.

Автоматические отступы

Автоматические отступы в Flex похожи на магические разделители. Они отталкивают flex-элементы друг от друга:

<div class="d-flex">
<div class="mr-auto">Слева</div>
<div>Центр</div>
<div class="ml-auto">Справа</div>
</div>

Это создаёт лево-центрально-правый макет с автоматическим разделением.

Перенос

Когда у вас слишком много элементов, чтобы они уместились в одной строке, flex-wrap приходит на помощь:

<div class="d-flex flex-wrap">
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
<div>Элемент 4</div>
<div>Элемент 5</div>
</div>

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

Порядок

Свойство order позволяет вам перерасполагать flex-элементы, не изменяя ваш HTML. Это как иметь пульт управления для вашего макета:

<div class="d-flex">
<div class="order-3">Первый в DOM, последний в макете</div>
<div class="order-2">Второй в DOM, второй в макете</div>
<div class="order-1">Третий в DOM, первый в макете</div>
</div>

Выравнивание содержимого

Когда у вас есть несколько строк flex-элементов, align-content помогает вам контролировать, как эти строки разделены:

<div class="d-flex flex-wrap align-content-start" style="height: 200px;">
<div>Элемент</div>
<div>Элемент</div>
...
</div>

Это может быть особенно полезно для создания сетчатых макетов.

Media object

Наконец, давайте рассмотрим практический пример - media object. Это.common pattern в веб-дизайне, и Flex делает его super easy:

<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
Это некоторое содержимое из media компонента. Вы можете заменить это любым содержимым и адаптировать его по мере необходимости.
</div>
</div>

Это создаёт гибкий media object с изображением слева и содержимым справа.

И вот и всё! Вы только что flex-ировали свой путь через систему Flex из Bootstrap. Помните, практика makes perfect, так что не бойтесь экспериментировать с этими свойствами. Before you know it, you'll be creating flexible, responsive layouts like a pro!

Here's a table summarizing all the Flex properties we've covered:

Свойство	Описание	Пример классов
Включение Flex	Делает контейнер flex-контейнером	d-flex
Направление	Устанавливает главную ось flex-контейнера	flex-row, flex-column
Выравнивание содержимого	Выравнивает элементы по главной оси	justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
Выравнивание элементов	Выравнивает элементы по поперечной оси	align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch
Выравнивание самого элемента	Выравнивает отдельный элемент	align-self-start, align-self-center, align-self-end
Заполнение	Делает элемент поглощать доступное пространство	flex-fill
Увеличение	Позволяет элементу увеличиваться	flex-grow-1
Сжатие	Позволяет элементу сжиматься	flex-shrink-1
Автоматические отступы	Создаёт пространство между элементами	mr-auto, ml-auto
Перенос	Позволяет элементам переносятся на следующую строку	flex-wrap
Порядок	Изменяет порядок элементов	order-1, order-2, etc.
Выравнивание содержимого	Выравнивает flex-линии	align-content-start, align-content-end, etc.

Счастливого flex-ирования, будущие суперзвезды веб-дизайна!

Credits: Image by storyset