Реагирующий гибкий макет карточек

Введение

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

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как выбирать элементы для размещения в виде гибких контейнеров
• Как контролировать перенос элементов-flex внутри гибкого контейнера
• Как контролировать позиционирование элементов-flex по главной оси

🏆 Достижения

После завершения этого проекта вы сможете:

• Использовать CSS Flexbox для создания адаптивного и гибкого макета
• Применять методы для управления поведением элементов-flex внутри гибкого контейнера
• Реализовать стратегии для позиционирования и распределения элементов-flex по главной оси

Настройка структуры проекта

В этом шаге вы научитесь настраивать структуру проекта.

Для начала откройте редактор. В редакторе вы должны увидеть два файла — flexible_card.html и flexible_card.css.

Нажмите кнопку "Go Live" в нижнем правом углу, чтобы открыть порт 8080 и просмотреть страницу flexible_card.html в браузере. Эффект будет таким:

Настройка гибких макетов

В этом шаге вы научитесь использовать элементы Flexbox для макета, чтобы добиться желаемого эффекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

1. Откройте файл flexible_card.css в редакторе.
2. Найдите селектор section в файле CSS.
3. Добавьте свойство display: flex; к селектору section, чтобы сделать элемент <section> гибким контейнером.

Обновленный код CSS должен выглядеть так:

section {
  display: flex; /* Сделайте секцию гибким контейнером */
  /* Другие стили */
}

4. Добавьте свойство flex-wrap: wrap; к селектору section, чтобы позволить элементам Flexbox переноситься на следующую строку, если они не помещаются на одной строке.

Обновленный код CSS должен выглядеть так:

section {
  display: flex;
  flex-wrap: wrap; /* Позволить элементам Flexbox переноситься на следующую строку */
  /* Другие стили */
}

5. Добавьте свойство justify-content: space-between; к селектору section, чтобы равномерно распределить элементы Flexbox по главной оси с равным расстоянием между ними.

Обновленный код CSS должен выглядеть так:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Равномерно распределить элементы Flexbox по главной оси */
  /* Другие стили */
}

После завершения этих трех шагов файл flexible_card.css должен выглядеть так:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

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

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.