Flexbox froggy 24 уровень

Flexbox froggy 24 уровень

Flexbox froggy 24 уровень

Прохождение

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

Fexbox froggy interface

Уровни идут по степени сложности. Пожалуй самый самый трудный уровень — это 24, который с ходу не решить. Но всё решается в три строчки:

flex-flow:column-reverse wrap-reverse;
align-content:space-between;
justify-content:center;

Flexbox froggy 24 уровень
Рассмотрим подробнее использованные свойства.

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-контейнера.

Foxford
Информатика в школе