Создайте привлекательный фруктовый салат с использованием CSS Flexbox

Введение

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

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

🎯 Задачи

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

настраивать контейнер Flexbox для организации фруктов на салате;
располагать фрукты одного цвета посередине соответствующих цветных досок.

🏆 Достижения

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

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

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/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/properties -.-> lab-300081{{"Взгляд на привлекательный фруктовый салат"}} css/box_model -.-> lab-300081{{"Взгляд на привлекательный фруктовый салат"}} css/width_and_height -.-> lab-300081{{"Взгляд на привлекательный фруктовый салат"}} css/display_property -.-> lab-300081{{"Взгляд на привлекательный фруктовый салат"}} css/flexbox -.-> lab-300081{{"Взгляд на привлекательный фруктовый салат"}} end

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

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

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

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, и вы увидите страницу.

Предпросмотр неготовой структуры проекта

Настройка контейнера Flexbox

В этом шаге вы научитесь настраивать контейнер Flexbox для организации фруктов на салате.

Откройте файл index.css в вашем редакторе кода.
Внутри селектора #pond добавьте следующие свойства CSS:

#pond {
  /* TODO: Добавьте здесь свой CSS-код */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Свойство display: flex задает элемент #pond в качестве контейнера Flexbox, позволяя использовать макет Flexbox для позиционирования фруктов.

Свойство flex-direction: column накапливает элементы Flexbox (контейнеры для фруктов) вертикально.

Свойство flex-wrap: wrap позволяет элементам Flexbox переноситься на следующую строку, если они не помещаются на текущей.

Готовый результат выглядит так:

✨ Проверить решение и практиковаться

Резюме

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