В двух предыдущих постах этой серии, посвященных CSS Flexbox, были рассмотрены все свойства flexbox, применяемые к flex-container и flex-items.

В этой статье мы рассмотрим некоторые популярные и распространенные случаи использования CSS flexbox.

В конце этой статьи я также поделюсь некоторыми полезными ресурсами для изучения CSS Flexbox самым простым способом!

ОБЩИЕ СЛУЧАИ ИСПОЛЬЗОВАНИЯ CSS FLEXBOX

• Выравнивание элементов с промежутком между ними
• Выравнивание элементов по горизонтали
• Выравнивание содержимого по центру
• Разделение контейнера пополам

Мы воспользуемся примером, приведенным на рисунках ниже, и попытаемся увидеть, как flexbox был использован при создании этой веб-страницы.

1. ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ С ПРОМЕЖУТКОМ МЕЖДУ НИМИ

Одним из вариантов использования flexbox является выравнивание элементов с промежутком между ними.

• На примере сайта navbar в заголовке имеет две секции: логотип и навигационные ссылки.
• Они размещены так, чтобы между ними оставалось пространство, и сдвинуты по обе стороны от navbar.
• Используя приведенный ниже код шаблона для navbar, посмотрим, как можно сдвинуть логотип и navbar так, чтобы между ними оставалось пространство.

Чтобы преобразовать это в правильную панель навигации, нам нужно сосредоточиться на родителе обоих  <h1> и  <nav>: div с классом navbar.

.navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

И все! 3 строки кода, а затем логотип и навигационные ссылки сдвигаются в обе стороны с промежутком между ними.

display: flex преобразует контейнер navbar в flex-контейнер.
Ссылки <h1> и <nav> размещаются горизонтально. flex-direction: row; — главная ось по умолчанию.
justify-content: space-between; разделяет flex-элементы пространством между ними и сдвигает их в противоположные стороны контейнера (main-start и main-end).
align-items: center; помещает flex-элементы в вертикальный центр flex-контейнера.
ПРИМЕЧАНИЕ: При использовании функции justify-content: space-between; для контейнера, содержащего более двух flex-элементов, они распределяются внутри контейнера, причем первый элемент располагается вблизи main-start, а последний элемент сдвигается в main-end.
Это может быть использовано в ситуации, когда в заголовке есть только навигационные ссылки.
Ознакомьтесь с этой статьей, чтобы узнать о justify-content
Посмотрите приведенный ниже GIF, чтобы понять, как работает приведенный выше код.

Это окончательный вид панели навигации с пространством между логотипом и навигационными ссылками.

2. ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ ПО ГОРИЗОНТАЛИ

Другой распространенный вариант использования flexbox — выравнивание элементов по горизонтали внутри контейнера.

На приведенном в качестве примера сайте навигационные ссылки были размещены горизонтально внутри панели навигации.
В примере 1, приведенном выше, логотип и навигационные ссылки были размещены правильно, но навигационные ссылки все равно отображаются вертикально.

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

Чтобы выровнять все навигационные ссылки по горизонтали, нам нужно сосредоточиться на <ul> и <li> внутри .navbar nav.

display: flex делает так, что <ul> становится flex-контейнером, и по умолчанию все дочерние <li> выравниваются по горизонтали.

Чтобы понять, как это работает, посмотрите приведенный ниже GIF.

Это окончательный вид навигационных ссылок в панели навигации.

3. ЦЕНТРИРОВАНИЕ СОДЕРЖИМОГО

Это, пожалуй, самый распространенный вариант использования flexbox: центрирование содержимого по вертикали и горизонтали.

• На приведенном выше примере веб-страницы можно заметить, что текст внутри изображения витрины центрируется как по вертикали, так и по горизонтали.
• Используя приведенный ниже исходный код, давайте посмотрим, как текст (или любое другое содержимое!) может быть отцентрирован в контейнере.

Здесь главной осью является столбец, поэтому применение flex к стекам #showcase-container , и по вертикали.

• justify-content: center; центрирует содержимое вдоль главной оси: column.
• align-items: center; выравнивает содержимое по центру вдоль поперечной оси: row. Их совместное использование центрирует содержимое по вертикали и горизонтали.
• ПРИМЕЧАНИЕ: Вы можете использовать комбинации justify-content и align-items для проверки различных вариантов выравнивания элементов внутри родительского контейнера. Посмотрите этот пост, чтобы узнать больше о justify-content и align-items.

Посмотрите GIF ниже, чтобы понять, как работает центрирование содержимого.

Это окончательный вид и текста.

4. Разделение контейнера пополам

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

• В приведенном примере веб-страницы карточки в главной секции разделены таким образом, что одна половина содержит изображение, а другая — содержимое.
• Используя приведенный ниже стартовый код, посмотрим, как можно разделить их на две равные секции.

• Как обычно, возьмем родительский контейнер контейнера, который нужно разделить.
• Родитель <img> и <h3>, <p> контейнер с классом card-body-column, который является div с классом card-body.

.card-body {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

• Приведенный выше код делает оба div с классом card-body-column flex-items.
  • Хотя эти два элемента должны быть выровнены по горизонтали, они разворачиваются на разные строки, поскольку их начальная ширина превышает ширину контейнера. Такое поведение связано с flex-wrap: wrap;
• Давайте теперь сосредоточимся на выравнивании элементов по горизонтали, для чего нам необходимо захватить контейнер с классом card-body-column.

.card-body .card-body-column {
      flex: 1;
  }
  .card-body img {
      height: 100%;
      width: 100%;
      object-fit: cover;
  }

• Добавление flex: 1; к .card-body-column заставляет контейнер увеличиваться или уменьшаться от одинаковой начальной ширины: 0. Таким образом, мы получаем 2 одинаковых контейнера, которые увеличиваются одинаково.
• Но изображение не занимает всю часть контейнера, поэтому мы устанавливаем ширину и высоту равными 100%.
• Чтобы соотношение ширины и высоты не искажалось при уменьшении или увеличении контейнера, мы также добавляем object-fit: cover;. Это позволит поместить изображение в качестве обложки в свою часть контейнера.
• ПРИМЕЧАНИЕ: Мы можем разделить контейнеры на секции с разным соотношением сторон, увеличив значение flex для одной половины контейнера.

Посмотрите GIF-изображение ниже, чтобы понять, как работает разделение контента.

Посмотрите в приведенном ниже GIF, как object-fit: cover; помогает изображению.

Флексбоксы и адаптивные экраны

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

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

@media (max-width:540px) {
    .card-body {
         flex-direction: column;
    }
}

• Когда размер экрана становится меньше 541px, главная ось становится столбцовой. В противном случае по умолчанию используется строка.

• Такая же отзывчивость может быть применена к логотипу и навигационным ссылкам, которые будут располагаться вертикально и по центру панели навигации.
• Существует множество других вариантов использования flexbox, которые можно легко обнаружить, поработав со свойствами flexbox и создавая сайты.
• В качестве примечания отметим, что разные разработчики используют различные комбинации свойств flex для достижения одного и того же эффекта. Например. для разделения логотипа и навигационных ссылок можно заметить, что justify-content: space-between не используется, а используется align-self для отдельных flex-элементов.
• Еще один важный вывод: flexbox — это не конец отзывчивого дизайна, и в некоторых ситуациях это может быть не самым простым решением. Например, скажем, вы хотите разделить свой сайт на header, main, sidebar и footer. В таких случаях CSS GRID гораздо проще и быстрее. НЕ СУЩЕСТВУЕТ ОДНОГО ПРАВИЛЬНОГО СПОСОБА ДЕЛАТЬ ЭТО! ВЫ АДАПТИРУЕТЕСЬ И УЧИТЕСЬ ПО МЕРЕ ИЗУЧЕНИЯ!

РЕСУРСЫ

Как и обещал, я приведу несколько ресурсов, которые помогли мне легко и эффективно освоить CSS Flexbox.

Надеюсь, это поможет вам.

• CSS MDN Web Docs: Не торопитесь читать эту документацию, поскольку объяснения очень подробны и точны.
• CSS Tricks: Еще один замечательный ресурс, где также объясняются основы flexbox.
• W3C Flexbox Docs: Очень подробное и глубокое понимание CSS Flexbox
• W3Schools: Еще один ресурс с краткими объяснениями и хорошими примерами

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

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

• Flexbox Defense Замечательная игра в стиле фэнтези, в которой вы используете свойства flex, чтобы не дать врагам проникнуть в вашу оборону.
• Flexbox Froggy Еще одна игра, в которой свойства flex используются для помощи лягушонку и его друзьям, чтобы направить их к их лилипутам!
• Flexbox Code Generator Этот сайт позволяет визуализировать свойства flex и играть с ними, изменяя комбинации свойств.
• Building UI with CSS Flex На этом сайте можно найти задачи на создание аккуратных и удивительных пользовательских интерфейсов с помощью CSS Flexbox.
• Dev Challenges Еще один сайт, на котором есть задачи для фронтенд- и отзывчивых веб-разработчиков по созданию компонентов и сайтов! И это (flex) завершение серии статей о CSS Flexbox.

Большое спасибо, что дочитали эту статью до конца.