Учебник по расстановке фруктов с использованием CSS Flexbox | Адаптивный дизайн макета

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

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-300076{{"Расстановка фруктов с использованием CSS Flexbox"}} css/box_model -.-> lab-300076{{"Расстановка фруктов с использованием CSS Flexbox"}} css/width_and_height -.-> lab-300076{{"Расстановка фруктов с использованием CSS Flexbox"}} css/display_property -.-> lab-300076{{"Расстановка фруктов с использованием CSS Flexbox"}} css/flexbox -.-> lab-300076{{"Расстановка фруктов с использованием CSS Flexbox"}} end

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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