Flexbox froggy 24 уровень
Прохождение
Flexbox froggy — это онлайн-игра для изучения CSS Flexbox. На протяжении двадцати четырех уровней необходимо располагать лягушек на соответствующие им по цвету листья лилий. В этой игре, экран браузера разделен на две части. В левой части необходимо вписывать CSS-свойства, а в правой в интерактивном режиме лягушки будут двигаться по указанному коду.
Уровни идут по степени сложности. Пожалуй самый самый трудный уровень — это 24, который с ходу не решить. Но всё решается в три строчки:
flex-flow:column-reverse wrap-reverse;
align-content:space-between;
justify-content:center;
Рассмотрим подробнее использованные свойства.
1. Свойство flex-flow было придумано из-за частого использования двух свойств:
- flex-direction — задает направление основной оси
- flex-wrap — указывает правила вывода flex-элементов в одну строку или можно занять несколько строк, с переносом блоков.
Это свойство принимает значения двух этих свойств, разделенные пробелом. Вместо flex-flow можно записать:
- flex-direction:column-reverse;
- flex-wrap:wrap-reverse;
2. Свойство align-content выравнивает ряды вдоль поперечной(вертикальной) оси flex-контейнера.
3. Свойство justify-content выравнивает ряды вдоль главной(горизонтальной) оси flex-контейнера.