Основы CSS Layout

Введение

Добро пожаловать в лабораторию основ CSS Layout! В этой практической сессии вы изучите основы CSS Flexbox — мощной модели макета, которая обеспечивает эффективный способ расположения, выравнивания и распределения пространства между элементами в контейнере.

В ходе этой лаборатории вы будете работать с предварительно настроенным HTML-файлом (index.html) и CSS-файлом (style.css). Ваша задача — изменить файл style.css для управления макетом элементов на странице. Вы можете видеть изменения в реальном времени, переключившись на вкладку Web 8080 в среде лаборатории.

Вы научитесь:

• Инициализировать flex-контейнер.
• Выравнивать элементы по главной оси с помощью justify-content.
• Выравнивать элементы по поперечной оси с помощью align-items.
• Изменять направление макета с помощью flex-direction.
• Разрешать элементам переноситься на несколько строк с помощью flex-wrap.

Приступим!

Установите display flex для элемента-контейнера

На этом шаге вы начнете с преобразования стандартного блочного элемента в flex-контейнер. Это основополагающий шаг для создания любого flexbox-макета.

Свойство display: flex; применяется к родительскому элементу (контейнеру), чтобы включить flex-контекст для всех его прямых дочерних элементов (элементов). После применения дочерние элементы автоматически располагаются в строку.

Сначала откройте файл style.css из файлового проводника в левой части экрана.

Затем найдите правило CSS .container. Добавьте свойство display: flex; внутрь этого правила.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  /* Мы добавим сюда flex-свойства */
  display: flex;
}

После добавления кода сохраните файл. Теперь переключитесь на вкладку Web 8080, чтобы увидеть результат. Вы заметите, что пронумерованные блоки, которые ранее были расположены вертикально, теперь выстроены горизонтально в одну строку.

Используйте свойство justify-content со значением space-between

На этом шаге вы научитесь управлять выравниванием элементов вдоль главной оси (по умолчанию горизонтально) с помощью свойства justify-content. Это свойство помогает распределять дополнительное свободное пространство в контейнере.

Мы будем использовать значение space-between, которое равномерно распределяет элементы. Первый элемент располагается в начале контейнера, последний — в конце, а оставшееся пространство распределяется поровну между элементами.

В вашем файле style.css добавьте свойство justify-content: space-between; к правилу .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
}

Сохраните файл и проверьте вкладку Web 8080. Вы увидите, что flex-элементы теперь распределены по всей ширине контейнера с равными промежутками между ними.

Примените свойство align-items со значением center

На этом шаге вы научитесь выравнивать элементы по поперечной оси (по умолчанию вертикально) с помощью свойства align-items.

Чтобы увидеть эффект вертикального выравнивания, сначала нужно задать контейнеру некоторую высоту. Затем мы будем использовать значение center для align-items, чтобы центрировать элементы по вертикали внутри контейнера.

В вашем файле style.css добавьте свойство height и align-items: center; к правилу .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 200px;
  align-items: center;
}

Сохраните файл и просмотрите результат на вкладке Web 8080. Контейнер теперь выше, и все flex-элементы идеально выровнены по центру вертикального пространства.

Реализуйте свойство flex-direction со значением column

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

По умолчанию направление flex-элементов — row. Установив его в column, вы можете располагать flex-элементы вертикально друг под другом. Когда вы меняете направление flex на column, главная ось становится вертикальной, а поперечная ось — горизонтальной. Это означает, что justify-content теперь будет управлять вертикальным выравниванием, а align-items — горизонтальным.

В вашем файле style.css добавьте свойство flex-direction: column; к правилу .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 400px; /* Увеличим высоту для лучшей визуализации */
  align-items: center;
  flex-direction: column;
}

Примечание: Мы увеличили высоту до 400px, чтобы лучше увидеть эффект justify-content в колоночном макете.

Сохраните файл и понаблюдайте за изменениями на вкладке Web 8080. Элементы теперь расположены в один столбец. Обратите внимание, как justify-content: space-between теперь добавляет пространство по вертикали между элементами, а align-items: center центрирует их по горизонтали.

Добавьте свойство flex-wrap со значением wrap для переноса

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

Чтобы продемонстрировать это, мы вернемся к построчному макету и установим фиксированную ширину контейнера, которая будет слишком мала, чтобы вместить все элементы в одну строку.

Сначала очистим правило .container, удалив свойства из предыдущих шагов (justify-content, align-items, flex-direction и height). Затем добавим фиксированную width и свойство flex-wrap: wrap;.

Обновите правило .container в style.css следующим образом:

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  width: 450px; /* Установим фиксированную ширину, чтобы вызвать перенос */
  flex-wrap: wrap;
}

Сохраните файл и обновите вкладку Web 8080. Вы увидите, что flex-элементы, которые не поместились в первой строке, перенеслись на вторую. Это важно для создания адаптивных макетов, которые подстраиваются под разные размеры экрана.

Резюме

Поздравляем с завершением лабораторной работы по основам CSS Layout! Вы успешно освоили основные концепции CSS Flexbox и применили их для создания гибких и адаптивных макетов.

В этой лабораторной работе вы практиковались в использовании:

• display: flex;: Для создания flex-контейнера.
• justify-content: Для выравнивания элементов вдоль главной оси.
• align-items: Для выравнивания элементов вдоль поперечной оси.
• flex-direction: Для определения направления главной оси (строка или столбец).
• flex-wrap: Для разрешения переноса элементов на несколько строк.

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