Реализация атомарного гибкого макета с использованием CSS

Введение

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

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

🎯 Задачи

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

• реализовывать атрибутно-ориентированный атомарный гибкий макет с использованием CSS
• стилизовать отдельные элементы гибкого макета

🏆 Достижения

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

• использовать атрибутно-ориентированный CSS для создания гибкого макета
• стилизовать отдельные элементы в гибком макете
• понять преимущества использования атомарного CSS для эффективного и поддерживаемого разработки CSS

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

Атомарный CSS - это недавно очень популярный метод построения CSS, а атрибутно-ориентированный (Attributify) атомарный CSS еще больше упрощает написание CSS.

Например, традиционно мы реализуем flex, создавая идентификатор класса на элементе, а затем выбирая элемент с помощью селектора в CSS:

<style>
  .box {
    display: flex;
  }
</style>
<div class="box"></div>

С использованием атрибутно-ориентированного атомарного CSS мы можем сделать то же самое следующим образом.

<div flex></div>

Для начала работы откройте среду эксперимента, и структура каталогов будет следующей:

├── css
│   └── style.css
└── index.html

где:

• css/style.css - это файл стилей, в котором необходимо дополнить код.
• index.html - главная страница.

Нажмите кнопку "Go Live" в нижнем правом углу, чтобы открыть порт 8080 и просмотреть страницу index.html в браузере, эффект будет следующим:

Реализация атрибутно-ориентированного атомарного гибкого макета

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

1. Откройте файл css/style.css.
2. Найдите раздел /* TODO */ в файле CSS.
3. Добавьте следующее правило CSS, чтобы реализовать атрибутно-ориентированный атомарный гибкий макет:

[flex="~ col"] {
  display: flex;
  flex-direction: column;
}

Это правило применяется к элементу div с атрибутом flex="~ col" и назначает необходимые стили для создания вертикального гибкого макета.

Свойство display: flex назначает элементу использовать гибкий макет, а свойство flex-direction: column задает вертикальное направление гибкости.

4. Сохраните файл style.css.
5. Вернитесь в браузер и обновите страницу. Вы должны увидеть следующий эффект:

Резюме

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