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

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

Шпаргалка по прохождению Flexbox Froggy: https://boosty.to/codequest/posts/a08... Подписывайся на альтернативные каналы: — https://vk.com/codequest — https://t.me/codequest Рассмотрим такую популярную обучающую игру по 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 Если тебе интересна данная тематика, подпишись на канал! Для меня это также станет дополнительным стимулом продолжать свою работу. Также жду вас на моем сайте https://codequest.ru Здесь вы найдете подробные интерактивные курсы по веб-разработке.