Расстановка фруктов с использованием CSS Flexbox

Введение

В этом проекте вы научитесь использовать CSS Flexbox для создания макета расстановки фруктов. Вы узнаете, как использовать свойства align-self и order для позиционирования и расстановки фруктов в мисках.

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

🎯 Задачи

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

• настраивать HTML-структуру для расстановки фруктов;
• использовать свойство align-self для выравнивания отдельных элементов Flex по оси поперек;
• использовать свойство order для изменения порядка элементов Flex;
• расставлять фрукты в требуемом макете с использованием Flexbox.

🏆 Достижения

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

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

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

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

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

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

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

Стилизовать расстановку фруктов

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

1. Откройте файл index.css в редакторе.
2. Выберите класс .yellow и задайте свойству align-self значение flex-end.
3. Задайте свойству order класса .yellow значение 1.

Теперь ваш файл index.css должен выглядеть так:

.yellow {
  align-self: flex-end;
  order: 1;
}

Свойство align-self используется для выравнивания отдельных элементов Flex по оси поперек, переопределяя значение align-items. В этом случае мы установили его на flex-end, чтобы выровнять желтый фрукт внизу миски.

Свойство order используется для изменения порядка элементов Flex. Мы установили его на 1 для желтого фрукта, что расположит его в конце контейнера Flex.

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

Резюме

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