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

CSSCSSBeginner
Практиковаться сейчас

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

Введение

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

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

Предпросмотр гибкого макета карточек

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/properties -.-> lab-300067{{"Реагирующий гибкий макет карточек"}} css/box_model -.-> lab-300067{{"Реагирующий гибкий макет карточек"}} css/display_property -.-> lab-300067{{"Реагирующий гибкий макет карточек"}} css/flexbox -.-> lab-300067{{"Реагирующий гибкий макет карточек"}} end

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

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

Для начала откройте редактор. В редакторе вы должны увидеть два файла — 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; /* Сделайте секцию гибким контейнером */
  /* Другие стили */
}
  1. Добавьте свойство flex-wrap: wrap; к селектору section, чтобы позволить элементам Flexbox переноситься на следующую строку, если они не помещаются на одной строке.

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

section {
  display: flex;
  flex-wrap: wrap; /* Позволить элементам Flexbox переноситься на следующую строку */
  /* Другие стили */
}
  1. Добавьте свойство 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, чтобы улучшить свои навыки.