Изучите направление flex в CSS Flexbox

Введение

В этом практическом занятии вы изучите различные направления flex в CSS Flexbox, приобретая практический опыт в том, как элементы могут быть размещены и позиционированы внутри контейнера с гибкой моделью. С помощью последовательного подхода вы создадите HTML-структуру и постепенно реализуете различные свойства направления flex, включая ориентации row, row-reverse, column и column-reverse.

Практическое занятие начинается с настройки основного HTML-файла с контейнером с гибкой моделью и несколькими элементами с гибкой моделью, что дает наглядное представление о том, как направление flex влияет на макет. Изменив свойство CSS flex-direction, вы научитесь управлять потоком и позиционированием элементов, понимая основные принципы CSS Flexbox и его мощные возможности макетирования.

Настройте HTML-структуру для демонстрации Flexbox

В этом шаге вы создадите основную HTML-структуру для демонстрации направлений CSS Flexbox. Мы настроим простой HTML-файл с несколькими элементами div, которые помогут нам изучить разные направления flex.

Сначала откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем flexbox-demo.html, щелкнув правой кнопкой мыши в проводнике файлов и выбрав "Новый файл".

Вставьте следующий HTML-код в файл flexbox-demo.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox Direction Demo</title>
    <style>
      .flex-container {
        display: flex;
        border: 2px solid #333;
        margin-bottom: 20px;
        padding: 10px;
      }
      .flex-item {
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: #4caf50;
        color: white;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
      <div class="flex-item">Item 4</div>
    </div>
  </body>
</html>

Разберём ключевые компоненты этой HTML-структуры:

Мы создали <div> с классом flex-container, который будет нашим контейнером с гибкой моделью.
Внутри контейнера у нас есть четыре элемента <div> с классом flex-item.
В разделе <style> мы добавили базовый CSS для:
- Установки display: flex для контейнера
- Присвоения фиксированного размера и цвета фона элементам с гибкой моделью
- Добавления некоторых базовых стилей для видимости

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

Реализуйте направление flex в ряд

В этом шаге вы узнаете о стандартном направлении flex в CSS Flexbox: направлении в ряд. Направление в ряд - это стандартный макет, при котором элементы с гибкой моделью располагаются горизонтально слева направо.

Откройте файл flexbox-demo.html в WebIDE и измените раздел <style>, чтобы явно установить направление flex в ряд:

<style>
  .flex-container {
    display: flex;
    flex-direction: row; /* Явно установите направление в ряд (стандарт) */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Основные моменты о направлении flex в ряд:

Элементы располагаются горизонтально слева направо
flex-direction: row - это стандартное значение для контейнеров с гибкой моделью
Каждый элемент сохраняет исходный порядок
Основная ось направлена горизонтально
Поперечная ось направлена вертикально

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

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

Реализуйте направление flex в обратном ряду

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

Откройте файл flexbox-demo.html в WebIDE и измените раздел <style>, чтобы установить направление flex в row-reverse:

<style>
  .flex-container {
    display: flex;
    flex-direction: row-reverse; /* Разверните порядок элементов горизонтально */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Основные характеристики направления flex row-reverse:

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

При просмотре этого в веб-браузере вы заметите, что элементы теперь расположены с права налево, при этом "Item 4" появляется первым слева, а "Item 1" - справа.

Это демонстрирует, как flex-direction: row-reverse позволяет изменить визуальный порядок элементов с гибкой моделью, сохраняя при этом горизонтальный макет.

Реализуйте направление flex в столбец

В этом шаге вы изучите направление flex column, которое располагает элементы с гибкой моделью вертикально сверху вниз.

Откройте файл flexbox-demo.html в WebIDE и измените раздел <style>, чтобы установить направление flex в column:

<style>
  .flex-container {
    display: flex;
    flex-direction: column; /* Разместите элементы вертикально */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
    height: 500px; /* Добавьте высоту, чтобы вертикальный макет был видимым */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Основные характеристики направления flex column:

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

При просмотре этого в веб-браузере вы заметите, что элементы теперь расположены вертикально:

"Item 1" будет сверху
"Item 2" будет ниже "Item 1"
"Item 3" будет ниже "Item 2"
"Item 4" будет внизу

Это демонстрирует, как flex-direction: column изменяет макет с горизонтального на вертикальный, предоставляя простой способ создания вертикальных макетов с использованием Flexbox.

Реализуйте направление flex в обратном столбце

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

Откройте файл flexbox-demo.html в WebIDE и измените раздел <style>, чтобы установить направление flex в column-reverse:

<style>
  .flex-container {
    display: flex;
    flex-direction: column-reverse; /* Разместите элементы вертикально снизу вверх */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
    height: 500px; /* Добавьте высоту, чтобы вертикальный макет был видимым */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Основные характеристики направления flex column-reverse:

Элементы располагаются вертикально снизу вверх
Основная ось вертикальна, но начинается снизу
Поперечная ось горизонтальна
Элементы накапливаются в обратном порядке
"Item 4" теперь будет отображаться вверху
"Item 1" будет внизу контейнера

При просмотре этого в веб-браузере вы заметите:

Вертикальный макет сохраняется
Порядок элементов обратен по сравнению с стандартным направлением столбца
Визуальный иерархический порядок инвертирован

Это демонстрирует, как flex-direction: column-reverse предоставляет простой способ изменить вертикальный порядок накопления элементов с гибкой моделью.

Резюме

В этом практическом занятии участники исследуют основы CSS Flexbox, создавая всестороннее демонстрацию направлений flex. Практическое занятие начинается с создания структурированного HTML-файла с гибким контейнером и несколькими элементами с гибкой моделью, что дает визуальную основу для понимания различных методов макетирования. Реализуя一系列 направлений flex, ученики получают практический опыт в управлении размещением элементов с использованием CSS Flexbox.

Практическое занятие систематически guides участников через четыре ключевые конфигурации направлений flex: ряд (стандарт), обратный ряд, столбец и обратный столбец. Каждое направление исследуется на практике при написании кода, что позволяет студентам понять, как flex-direction влияет на позиционирование и расположение элементов внутри контейнера. Этот подход позволяет ученикам глубоко понять принципы гибкого макета и их применение в адаптивной веб-дизайне.