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

• Игра Xbox Froggy предлагает 24 уровня для изучения flexbox.  

• Цель игры - расставить лягушек на соответствующие лилии с помощью свойств flexbox.  

• Призыв поставить лайк и подписаться на канал.  

• Одна лягушка и одна лилия.  

• Использование свойства justify-content для выравнивания по главной оси.  

• Применение свойства align-items для выравнивания по поперечной оси.  

• Две лягушки и две лилии.  

• Использование свойства justify-content для равномерного распределения по главной оси.  

• Применение свойства space-between для выравнивания по краям контейнера.  

• Три лягушки и три лилии.  

• Использование свойств justify-content и align-items для выравнивания по центру обеих осей.  

• Применение свойства flex-direction для изменения направления главной оси.  

• Четыре лягушки и четыре лилии.  

• Использование свойства flex-direction для вертикального расположения элементов.  

• Применение свойств justify-content и space-between для выравнивания по главной оси.  

• Пять лягушек и пять лилий.  

• Использование свойства flex-direction для вертикального расположения элементов с противоположным направлением.  

• Применение свойств justify-content и space-between для выравнивания по главной оси.  

• Шесть лягушек и шесть лилий.  

• Использование свойства order для изменения порядка элементов.  

• Применение свойств align-self и order для выравнивания элементов по поперечной оси.  

• Семь лягушек и семь лилий.  

• Использование свойства flex-grow для переноса элементов на новую линию.  

• Применение свойств flex-flow и flex-grow для вертикального расположения элементов.  

• Восемь лягушек и восемь лилий.  

• Использование свойства flex-flow для вертикального расположения элементов.  

• Применение свойств flex-grow и flex-direction для переноса элементов на новый ряд.  

• Девять лягушек и девять лилий.  

• Использование свойства flex-start для выравнивания рядов по началу поперечной оси.  

• Применение свойств flex-end и flex-grow для выравнивания рядов по концу поперечной оси.