Дизайн макета овощей с использованием Flexbox

Введение

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

👀 Предварительный просмотр

🎯 Задачи

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

• настраивать макет с использованием свойств CSS Flexbox;
• размещать овощи в нужных позициях внутри макета;
• использовать свойства Flexbox, такие как display, justify-content, align-items и align-self, чтобы достичь нужного макета.

🏆 Достижения

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

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

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

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

1. Откройте папку проекта, которая содержит следующие файлы и директории:

   • css/style.css
   • index.html

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

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

Настройка макета

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

1. Откройте файл style.css в редакторе.

2. Внутри селектора #box1 добавьте следующие свойства CSS:

   #box1 {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

   Это центрирует содержимое как по горизонтали, так и по вертикали внутри контейнера #box1.

3. Внутри селектора #box2 добавьте следующие свойства CSS:

   #box2 {
     display: flex;
     justify-content: space-between;
   }
   

   Это распределяет элементы в контейнере #box2 равномерно с промежутками между ними.

4. Внутри селектора #box2.item:nth-child(2) добавьте следующее свойство CSS:

   #box2.item:nth-child(2) {
     align-self: flex-end;
   }
   

   Это выравнивает второй элемент в #box2 по нижней части контейнера.

Расположить овощи

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

1. Внутри селектора #box3 добавьте следующие свойства CSS:

   #box3 {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
   

   Это создаст горизонтальный макет для элементов в #box3 и распределит их равномерно с промежутками между ними.

2. Внутри селектора #box3.item:nth-child(2) добавьте следующее свойство CSS:

   #box3.item:nth-child(2) {
     align-self: center;
   }
   

   Это выровняет второй элемент в #box3 по центру контейнера.

3. Внутри селектора #box3.item:nth-child(3) добавьте следующее свойство CSS:

   #box3.item:nth-child(3) {
     align-self: flex-end;
   }
   

   Это выровняет третий элемент в #box3 по нижней части контейнера.

После завершения этих шагов файл style.css должен соответствовать предоставленному решению, и макет овощей должен соответствовать готовому примеру.

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

Резюме

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