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 - Послесловие
верстаю со времен float и inline-block, но последнее задание.. я даже не знал значения wrap-reverse у свойства flex-wrap 😳(на практике такое никогда не встретишь наверное, а подсказки не читал, я ж про) додумался разве что подкинуть direction: rtl к flex-wrap: wrap, но это конечно обходной вариант, поэтому пошел гуглить и оказался тут
Если не ошибаюсь, в 24 уровне есть баги, потому что мой код был написан верно, но не работал. Я пытался обратиться к классу .yellow, но нет... то есть задание осложняется ещё и тем, что функционал строго ограничен разработчиками.
@@CodeQuestRu вот не знаю что тут не правильно но система говорит что тут не правильно , уровень 24 flex-direction:column-reverse; flex-warp: warp-reverse; aling-content:space-between; jutify-content:center;
@@ayazkg6969 Возможно у вас где-то опечатка, вот попробуйте на 24 уровне: flex-direction: column-reverse; flex-wrap: wrap-reverse; align-content: space-between; justify-content: center;
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 - Послесловие
запутался на 24 уровне. Спасибо за подсказку.
Рад, что помог. Попробуйте еще Flexbox Defense, тоже чем-то похожий тренажер =)
@@CodeQuestRu спасииббоо)) залип ))
@@mattmurdock2414 Круто, рад что помог =)
@@CodeQuestRu спс прошел все игры сам)тут решил посмотреть как ты сделал 24)у меня по другому немного
@@Sergey30838 круто, напишите ваш вариант =)
На каких уровнях Flexbox Froggy у вас возникали сложности и как быстро вы смогли их решить?
Только Ордер ну и последние задание...над последним минут 30 колдовал =(
@@Gancher3000 главное, что справились =)
@@CodeQuestRu Сам не поверил, поэтому решил перепроверить)
Спасибо за видео!
Последнее не мог решить, спасибо за видео.
верстаю со времен float и inline-block, но последнее задание.. я даже не знал значения wrap-reverse у свойства flex-wrap 😳(на практике такое никогда не встретишь наверное, а подсказки не читал, я ж про) додумался разве что подкинуть direction: rtl к flex-wrap: wrap, но это конечно обходной вариант, поэтому пошел гуглить и оказался тут
ВЫ МОЙ СПАСИТЕЛЬ, СПАСИБО ОГРОМНОЕ ❤
Спасибо очень помог, с заданием на информатику)
Супер, надеюсь и в дальнейших проектах поможет, если решишь этим заниматься =)
Маша, завтра вызову к доске
Если не ошибаюсь, в 24 уровне есть баги, потому что мой код был написан верно, но не работал. Я пытался обратиться к классу .yellow, но нет... то есть задание осложняется ещё и тем, что функционал строго ограничен разработчиками.
Если бы можно было обращаться к элементам, то было бы слишком легко
Вот мой вариант кода 24lvl:
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
24 уровень прошел сам ... Но до сих пор не понял почему space-beetwen делает так что бы зеленые лягушонки встали по середине ...
В каком моменте?
А есть другие подобные игры\тренажеры ?
Да, в одном из предыдущих видео я показывал игру с башнями. Еще есть огород для изучения гридов и другие)
@@CodeQuestRu Посмотрю. Спасибо !
Спасибо
Рад, что помог =)
А как заново пройти? Уже всё пойдено, как результаты сбросить?
Когда нажимаешь на уровни, появляется выпадающее окно, где ты можешь выбрать любой из уровней или сбросить прохождение =)
@@CodeQuestRu спс
Почему у меня нечего не выходит я вроде бы всё правильно делаю помогите пожалуйста
Привет, какой уровень не получается?
Спасибо что ответили! Я просто неправильно написала потом я внимательно посмотрела и прошла все уровни Спасибо вам
Рад, что вы разобрались!
Обращайтесь, если что =)
Не справился только с последним
застрял на 19 уровне помогите пж
Приветствую, что конкретно не получается? Решение есть в видео на 10:40
Если нужно подробнее объяснить, спрашивайте
@@CodeQuestRu вот не знаю что тут не правильно но система говорит что тут не правильно
, уровень 24
flex-direction:column-reverse;
flex-warp: warp-reverse;
aling-content:space-between;
jutify-content:center;
@@ayazkg6969 Возможно у вас где-то опечатка, вот попробуйте на 24 уровне:
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: space-between;
justify-content: center;
Спасибо
Рад был помочь, обращайтесь =)
Спасибо