Реагируемый макет кубиков с использованием Flexbox

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

Макет кубика 1

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

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

В этом шаге вы будете использовать свойства justify-content и align-items для позиционирования точек внутри первого кубика.

1. Откройте файл index.html в вашем редакторе кода.
2. В раздел <style> добавьте следующие правила для класса .div1:

.div1 {
  justify-content: center;
  align-items: center;
}

Свойство justify-content: center центрирует точку по горизонтали, а align-items: center — по вертикали.

Макет кубика 2

В этом шаге вы будете использовать свойства justify-content, flex-direction и align-items для позиционирования точек внутри второго кубика.

1. В раздел <style> добавьте следующие правила для класса .div2:

.div2 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

Свойство justify-content: space-around равномерно распределяет точки вдоль главной оси (горизонтально), flex-direction: column накапливает точки вертикально, а align-items: center центрирует их внутри кубика.

Макет кубика 3

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

1. В раздел <style> добавьте следующие правила для класса .div3:

.div3 {
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.div3 p:first-child {
  align-self: flex-start;
}

.div3 p:last-child {
  align-self: flex-end;
}

Свойство justify-content: space-around равномерно распределяет точки вдоль главной оси (горизонтально), align-items: center центрирует их вертикально, а padding: 10px добавляет некоторый отступ вокруг кубика.

Свойство align-self используется для позиционирования первой и последней точек вверху и внизу кубика соответственно.

Макеты кубиков 4, 5, 6, 7 и 9

В этом шаге вы будете использовать свойства justify-content, align-self, flex-direction и align-items для позиционирования точек внутри оставшихся кубиков.

1. В раздел <style> добавьте следующие правила для класса .div4:

.div4 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

.div4 div {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.div4 p {
  align-self: center;
}

Свойство justify-content: space-around равномерно распределяет точки вдоль главной оси (горизонтально), flex-direction: column накапливает точки вертикально, а align-items: center центрирует их внутри кубика.

Внутренние элементы <div> используются для группировки точек по горизонтали, при этом justify-content: space-around равномерно распределяет их. Свойство align-self: center используется для центрирования отдельных точек внутри соответствующих строк.

Макет кубика 8

В этом финальном шаге вы будете использовать свойства justify-content, align-self, flex-wrap и flex-basis для позиционирования точек внутри восьмого кубика.

1. В раздел <style> добавьте следующие правила для класса .div8:

.div8 {
  flex-wrap: wrap;
  padding: 2px;
}

.div8 div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
}

Свойство flex-wrap: wrap позволяет точкам переноситься на следующую строку, если они не помещаются на одной строке. Свойство padding: 2px добавляет некоторый отступ вокруг кубика.

Внутренние элементы <div> используются для группировки точек по горизонтали, при этом justify-content: space-between равномерно распределяет их, а align-items: center центрирует их вертикально. Свойство flex-basis: 100% гарантирует, что каждая строка занимает всю ширину кубика.

Следуя этим шагам, вы успешно реализовали макет кубиков с использованием Flexbox в соответствии с требованиями.

Резюме

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