Прохождение Flexbox Froggy, все 24 уровня с пояснениями | Практика Flexbox CSS

Шпаргалка по прохождению Flexbox Froggy:

Подписывайся на альтернативные каналы:

Рассмотрим такую популярную обучающую игру по Flexbox CSS, как Flexbox Froggy.
В ней нам предстоит использовать флексбокс-свойства, чтобы расставить разноцветных лягушек по своим местам.

Данный тренажер содержит 24 уровня от простого к более сложному.
Давайте пройдем их вместе с вами, а я постараюсь объяснить все принимаемые мной решения.

0:00 - Об игре Flexbox Froggy
0:33 - 1. Знакомство с justify-content, смещение к концу главной оси
1:17 - 2. Выравнивание по центру главной оси
1:42 - 3. Значение space-around, равномерное распределение с отступами
2:04 - 4. Значение space-between, равномерное распределение с прижатием
2:21 - 5. Свойство align-items, выравнвиание по поперечной оси
3:08 - 6. Выравнивание элемента по центру
3:38 - 7. Выравнивание элементов по обеим осям
4:06 - 8. Свойство flex-direction, вращение главной оси
4:42 - 9. Вертикальное положение главной оси
5:11 - 10. Использование flex-direction и justify-content по горизонтали
5:53 - 11. Использование flex-direction и justify-content по вертикали
6:24 - 12. Разворот по вертикали с равномерным распределением
7:01 - 13. Закрепление изученных свойство
7:44 - 14. Свойство order, порядок элементов
8:37 - 15. Отрицательный порядок элемента
8:54 - 16. Свойство align-self, выравнивание элемента по поперечной оси
9:32 - 17. Свойства order и align-self
10:06 - 18. Свойства flex-wrap, многострочный макет
10:40 - 19. Многострочный макет по вертикали
11:07 - 20. Свойство flex-flow, направление потока
11:33 - 21. Свойство align-content, выравнивание рядов
12:10 - 22. Прижатие рядов в концу поперечной оси
12:30 - 23. Вертикальный макет с выравниванием рядов по центру
13:10 - 24. Финальное испытание на знание свойств Flexbox
14:27 - Послесловие

#FlexboxFroggy

Если тебе интересна данная тематика, подпишись на канал!
Для меня это также станет дополнительным стимулом продолжать свою работу.

Здесь вы найдете подробные интерактивные курсы по веб-разработке.

[CodeQuestRu]

0:00 - Об игре Flexbox Froggy
0:33 - 1. Знакомство с justify-content, смещение к концу главной оси
1:17 - 2. Выравнивание по центру главной оси
1:42 - 3. Значение space-around, равномерное распределение с отступами
2:04 - 4. Значение space-between, равномерное распределение с прижатием
2:21 - 5. Свойство align-items, выравнвиание по поперечной оси
3:08 - 6. Выравнивание элемента по центру
3:38 - 7. Выравнивание элементов по обеим осям
4:06 - 8. Свойство flex-direction, вращение главной оси
4:42 - 9. Вертикальное положение главной оси
5:11 - 10. Использование flex-direction и justify-content по горизонтали
5:53 - 11. Использование flex-direction и justify-content по вертикали
6:24 - 12. Разворот по вертикали с равномерным распределением
7:01 - 13. Закрепление изученных свойство
7:44 - 14. Свойство order, порядок элементов
8:37 - 15. Отрицательный порядок элемента
8:54 - 16. Свойство align-self, выравнивание элемента по поперечной оси
9:32 - 17. Свойства order и align-self
10:06 - 18. Свойства flex-wrap, многострочный макет
10:40 - 19. Многострочный макет по вертикали
11:07 - 20. Свойство flex-flow, направление потока
11:33 - 21. Свойство align-content, выравнивание рядов
12:10 - 22. Прижатие рядов в концу поперечной оси
12:30 - 23. Вертикальный макет с выравниванием рядов по центру
13:10 - 24. Финальное испытание на знание свойств Flexbox
14:27 - Послесловие

[ruslanrustamov]

запутался на 24 уровне. Спасибо за подсказку.

[mariboom]

Спасибо очень помог, с заданием на информатику)

[CodeQuestRu]

На каких уровнях Flexbox Froggy у вас возникали сложности и как быстро вы смогли их решить?

[serheimalyshev]

Вот мой вариант кода 24lvl:
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;

[roboheat]

24 уровень прошел сам ... Но до сих пор не понял почему space-beetwen делает так что бы зеленые лягушонки встали по середине ...

[podpalmoi]

Если не ошибаюсь, в 24 уровне есть баги, потому что мой код был написан верно, но не работал. Я пытался обратиться к классу .yellow, но нет... то есть задание осложняется ещё и тем, что функционал строго ограничен разработчиками.

[slawaslawa]

А как заново пройти? Уже всё пойдено, как результаты сбросить?

[AlexAlex-bpil]

А есть другие подобные игры\тренажеры ?

[albinaanvarova]

Почему у меня нечего не выходит я вроде бы всё правильно делаю помогите пожалуйста