Взгляд на привлекательный фруктовый салат

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

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

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

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

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

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

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

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

1. Откройте файл index.css в вашем редакторе кода.
2. Внутри селектора #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, чтобы улучшить свои навыки.