Если вы изучаете FlexBox CSS и ищете способы закрепить свои знания, то вы в нужном месте. Ведь сейчас мы рассмотрим такую обучающую игру, как Flexbox Defense. Суть этой игры заключается в том, чтобы при помощи свойств Flexbox расположить башни, которые защищают нас от наступающих врагов.
Всего в данной игре 12 уровней от простого к более сложному. Давайте пройдем их вместе с вами, а я постараюсь объяснить все принимаемые мной решения.
Уровень 1
Каждый уровень начинается с небольшого блока теории, которая должна помочь нам в его прохождении. На первом уровне нам объясняют нашу задачу - расставить башни. А также говорят, что для этого мы должны использовать свойство justify-content, которое задает расположение элементов вдоль главной оси.
Как вы наверняка уже знаете, всего у гибкого контейнера две оси: главная и поперечная. Изначально, главная ось направлена по направлению текста, в нашем случае - слева направо. Все элементы контейнера располагаются вдоль этой главной оси. Как мы видим, наши башни расположены в начале главной оси. Это положение всех гибких элементов по умолчанию.
В данном случае наши башни необходимо расположить по центру. Зададим свойству justify-content соответствующее значение:
.tower-group-1 {
display: flex;
justify-content: center;
}
Уровень 2
Теперь в нашем распоряжении целых три башни, каждая из которых располагается в собственном контейнере. Для каждого контейнера мы должны использовать подходящее значения свойства justify-content, чтобы поставить башни на свои места.
Как мы уже говорили, изначально все элементы Flexbox прижаты к началу главной оси. Башню первого и третьего контейнеров нам необходимо прижать к концу главной оси. Используем для этого соответствующее свойство flex-end.
Вторую башню необходимо выравнять по центру, что мы уже делали на прошлом уровне:
.tower-group-1 {
display: flex;
justify-content: flex-end;
}
.tower-group-2 {
display: flex;
justify-content: center;
}
.tower-group-3 {
display: flex;
justify-content: flex-end;
}
Уровень 3
На третьем уровне нам объясняют, что башня мигает красным, когда находится на пути. И мы должны изменить ее расположение, прежде чем запускать волну. Используем для этого все тоже свойство justify-content.
Первую башню мы расположим по центру, как делали в предыдущих уровнях. Второй контейнер содержит два элемента, которые необходимо прижать к двум противоположным краям главной оси. Для этого у свойства justify-content есть специальное значение space-between, которое позволяет распределить все элементы по главной оси равномерно с Прижатием крайних элементов к контейнеру:
.tower-group-1 {
display: flex;
justify-content: center;
}
.tower-group-2 {
display: flex;
justify-content: space-between;
}
Уровень 4
Если главная ось, как мы уже знаем, имеет направление текста - в нашем случае это слева направо. То поперечная ось, всегда перпендикулярна главной и изначально направлена по направлению блоков - в нашем случае сверху вниз.
Мы видим, что для прохождения уровня нам необходимо прижать наши башни к концу поперечной оси. Используем свойство align-items в соответствующем значении flex-end. Тоже самое повторяем и для второй группы:
.tower-group-1 {
display: flex;
align-items: flex-end;
}
.tower-group-2 {
display: flex;
align-items: flex-end;
}
Уровень 5
На пятом уровне мы начинаем с первого контейнера. В первую очередь давайте прижмем все его элементы к концу поперечной оси.
Теперь, нам необходимо распределить их по главной оси. Для этого мы используем еще одно значение свойства justify-content - space-around. Данное значение, как и space-between позволяет распределить все элементы контейнера равномерно, но крайние его элементы не прижимаются к краям контейнера, а отступают от него на расстояние, равное половине расстояния между элементами.
Во втором контейнере нам достаточно расположить наши элементы по центру главной оси. В третьем контейнере, расположим наши элементы по центру как главной, так и поперечной оси:
.tower-group-1 {
display: flex;
align-items: flex-end;
justify-content: space-around;
}
.tower-group-2 {
display: flex;
justify-content: center;
}
.tower-group-3 {
display: flex;
justify-content: center;
align-items: center;
}
Уровень 6
И еще одно задание для закрепления ранее изученных свойств. В первую очередь предлагаю выравнять элементы по центру поперечной оси.
Для этого мы используем свойство align-items в значении center.
Далее, давайте распределим элементы по главной оси с использованием уже известного нам значения space-between:
.tower-group-1 {
display: flex;
align-items: center;
justify-content: space-between;
}
Уровень 7
Мы видим, что наши элементы необходимо расположить вдоль вертикальной дороги. Мы не можем этого сделать, пока наша главная ось имеет горизонтальное положение. Применим свойство flex-direction в значении column, чтобы поменять направление главной оси. Теперь наша главная ось располагается вертикально сверху вниз и наши элементы последовали вдоль нового направления.
Уверен, что этого достаточно. Но давайте еще применим уже знакомое нам свойство justify-content, чтобы равномерно распределить элементы. Используем значение space-between:
.tower-group-1 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tower-group-2 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Уровень 8
Теперь свойство flex-direction необходимо объединить со свойством, которое мы узнали ранее. В первую очередь мы видим, что нам необходимо поменять направление главной оси, как и в прошлом задании. Также применим свойство justify-content в значении space-between, чтобы распределить элементы равномерно.
Поперечная ось гибкого контейнера всегда направлена перпендикулярно главной оси. Поскольку мы поменяли направление главной оси, поперечная ось также изменила свое направление. В данном случае она направлена слева направо. Используем свойство align-items в значении center, чтобы выравнять наши элементы по центру поперечной оси:
.tower-group-1 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tower-group-2 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Уровень 9
На этот раз в каждой группе есть супер башня! Супер башне нужно время, чтобы перезаряжаться, но она наносит урон каждому врагу в радиусе атаки.
Видим, что наш первый контейнер содержит лишь одну строку. Значит работать нам нужно только с главной осью. В первую очередь давайте распределим элементы. Поскольку нам необходимо отступить от края контейнера, используем свойство justify-content в значении space-around.
Далее, как я полагаю, супер башню необходимо разместить вот в этой области. Для этого нам достаточно изменить направление главной оси на противоположное. Используем свойство flex-direction в значении row-reverse.
Второй блок имеет контейнер побольше, значит будем работать с обеими осями. В первую очередь давайте выравняем наши элементы по центру поперечной оси. Для этого мы используем свойство align-items в значении center.
Дальше, по сути нам нужно повторить действия, которые мы совершали для первого блока. Распределяем элементы по главной оси. А также меняем ее направление на противоположное:
.tower-group-1 {
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.tower-group-2 {
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: row-reverse;
}
Уровень 10
Супер башни снова в плохом положении, но на этот раз вам нужно применить стили к самим башням. Свойство order определяет порядок элемента в гибком контейнере, и принимает как положительные, так и отрицательные целочисленные значения.
Все гибкие элементы начинаются с порядка 0 по умолчанию, поэтому элемент с порядком выше 0 будет перемещен относительно элементов, которые имеют порядок по умолчанию.
В первую очередь давайте распределим элементы по главной оси. Используем свойство justify-content в значении space-around. Далее, нам необходимо переместить нашу супер башню в последнюю позицию. Поскольку все элементы по умолчанию имеют порядок 0, чтобы поставить элемент после них, ему достаточно задать любое значение выше 0.
Пусть это будет 1.
Повторим тоже самое со вторым блоком. Распределяем элементы. В данном случае супер башню наоборот нужно разместить до всех элементов. Для этого достаточно задать его порядку любое отрицательное значение, например, -1:
.tower-group-1 {
display: flex;
justify-content: space-around;
}
.tower-1-1 {
}
.tower-1-2 {
order: 1;
}
.tower-1-3 {
}
.tower-group-2 {
display: flex;
justify-content: space-around;
}
.tower-2-1 {
}
.tower-2-2 {
order: -1;
}
.tower-2-3 {
}
Уровень 11
В первую очередь распределим элементы по главной оси. Используем свойство justify-content на этот раз в значении space-between, чтобы наши элементы были прижаты к краю контейнера.
Далее, нам необходимо обратиться к отдельным элементам и изменить их расположение по поперечной оси. Обратимся к первой башне и используем свойство align-self в значении flex-end, чтобы прижать ее к концу поперечной оси.
Тоже самое делаем и для третьего элемента:
.tower-group-1 {
display: flex;
justify-content: space-between;
}
.tower-1-1 {
align-self: flex-end;
}
.tower-1-2 {
}
.tower-1-3 {
align-self: flex-end;
}
.tower-1-4 {
}
Уровень 12
И вот мы дошли до финального уровня, в котором нам предлагают использовать все изученные ранее свойства. В первую очередь давайте зададим общее выравнивание для всех элементов на уровне контейнера. По поперечной оси поставим их по центру. А по главной распределим равномерно с прижатиям к краю контейнера.
Далее, поменяем значения вертикального выравнивания для первой и последней башни. Первую мы прижмем к началу поперечной оси, а последнюю к концу.
Все что нам осталось сделать, это поменять порядок расположения элементов. Сделать это можно по разному. Например, зададим порядок 1 для первой башни, а также для последней. Поскольку они имеют общий порядок, то будут расположены в порядке их следования в документе:
.tower-group-1 {
display: flex;
align-items: center;
justify-content: space-between;
}
.tower-1-1 {
align-self: flex-start;
}
.tower-1-2 {
order: 1;
}
.tower-1-3 {
}
.tower-1-4 {
}
.tower-1-5 {
align-self: flex-end;
order: 1;
}
Вот мы и завершили прохождение игры Flexbox Defense с разбором всех ее уровней. Если вы хотите закрепить ваши знания, то пройдите ее еще раз, но только самостоятельно.