Если вы изучаете FlexBox CSS и ищете способы закрепить свои знания, то вы в нужном месте. Ведь сейчас мы рассмотрим такую обучающую игру, как Flexbox Defense. Суть этой игры заключается в том, чтобы при помощи свойств Flexbox расположить башни, которые защищают нас от наступающих врагов.
Всего в данной игре 12 уровней от простого к более сложному. Давайте пройдем их вместе с вами, а я постараюсь объяснить все принимаемые мной решения.
Уровень 1
Каждый уровень начинается с небольшого блока теории, которая должна помочь нам в его прохождении. На первом уровне нам объясняют нашу задачу - расставить башни. А также говорят, что для этого мы должны использовать свойство justify-content
, которое задает расположение элементов вдоль главной оси.
Как вы наверняка уже знаете, всего у гибкого контейнера две оси: главная и поперечная. Изначально, главная ось направлена по направлению текста, в нашем случае - слева направо. Все элементы контейнера располагаются вдоль этой главной оси. Как мы видим, наши башни расположены в начале главной оси. Это положение всех гибких элементов по умолчанию.
В данном случае наши башни необходимо расположить по центру. Зададим свойству justify-content
соответствующее значение:
.tower-group-1 {
display: flex;
justify-content: center;
}
![Решение для 1 уровня](/images/uploads/articles/defense/1.png)
Уровень 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;
}
![Решение для 2 уровня](/images/uploads/articles/defense/2.png)
Уровень 3
На третьем уровне нам объясняют, что башня мигает красным, когда находится на пути. И мы должны изменить ее расположение, прежде чем запускать волну. Используем для этого все тоже свойство justify-content
.
Первую башню мы расположим по центру, как делали в предыдущих уровнях. Второй контейнер содержит два элемента, которые необходимо прижать к двум противоположным краям главной оси. Для этого у свойства justify-content
есть специальное значение space-between
, которое позволяет распределить все элементы по главной оси равномерно с Прижатием крайних элементов к контейнеру:
.tower-group-1 {
display: flex;
justify-content: center;
}
.tower-group-2 {
display: flex;
justify-content: space-between;
}
![Решение для 3 уровня](/images/uploads/articles/defense/3.png)
Уровень 4
Если главная ось, как мы уже знаем, имеет направление текста - в нашем случае это слева направо. То поперечная ось, всегда перпендикулярна главной и изначально направлена по направлению блоков - в нашем случае сверху вниз.
Мы видим, что для прохождения уровня нам необходимо прижать наши башни к концу поперечной оси. Используем свойство align-items
в соответствующем значении flex-end
. Тоже самое повторяем и для второй группы:
.tower-group-1 {
display: flex;
align-items: flex-end;
}
.tower-group-2 {
display: flex;
align-items: flex-end;
}
![Решение для 4 уровня](/images/uploads/articles/defense/4.png)
Уровень 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;
}
![Решение для 5 уровня](/images/uploads/articles/defense/5.png)
Уровень 6
И еще одно задание для закрепления ранее изученных свойств. В первую очередь предлагаю выравнять элементы по центру поперечной оси.
Для этого мы используем свойство align-items
в значении center
.
Далее, давайте распределим элементы по главной оси с использованием уже известного нам значения space-between
:
.tower-group-1 {
display: flex;
align-items: center;
justify-content: space-between;
}
![Решение для 6 уровня](/images/uploads/articles/defense/6.png)
Уровень 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;
}
![Решение для 7 уровня](/images/uploads/articles/defense/7.png)
Уровень 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;
}
![Решение для 8 уровня](/images/uploads/articles/defense/8.png)
Уровень 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;
}
![Решение для 9 уровня](/images/uploads/articles/defense/9.png)
Уровень 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 {
}
![Решение для 10 уровня](/images/uploads/articles/defense/10.png)
Уровень 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 {
}
![Решение для 11 уровня](/images/uploads/articles/defense/11.png)
Уровень 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;
}
![Решение для 12 уровня](/images/uploads/articles/defense/12.png)
Вот мы и завершили прохождение игры Flexbox Defense
с разбором всех ее уровней. Если вы хотите закрепить ваши знания, то пройдите ее еще раз, но только самостоятельно.