Определите ось перед выбором свойства CSS
Прочитайте целевые кувшинки уровня и проверьте текущее расположение лягушек. В направлении строки по умолчанию justify-content работает вдоль горизонтальной главной оси, а align-items — вдоль вертикальной поперечной оси. Прежде чем вводить значение, укажите, какую ось вы хотите изменить. Эта привычка предотвращает распространенную ошибку: выбор правильного значения для свойства, управляющего другим направлением.
Когда flex-direction меняется на столбец, вместе с ним изменяются главная и поперечная оси. Переоцените свойство вместо того, чтобы предполагать, что justify-content всегда означает горизонтальное движение. Введите одно изменение CSS в редакторе и сравните полученные позиции с целевыми. Лягушки позиционируются вашим CSS, а не перетаскиваются на место. Используйте подсказки уровня и разрешенные свойства, чтобы привязать эксперимент к фактически показанной задаче.
Объясните неудачное изменение, прежде чем пробовать другое.
После того, как изменение не достигло цели, спросите, повлияло ли свойство не на ту ось, выбранное значение расположило элементы иначе, чем вы ожидали, или текущее направление изменило смысл макета. Сохраните ту часть правила, которую вы поняли, и исправьте одну вещь. Замена нескольких свойств одновременно может достичь цели, но при этом вы не будете уверены, какое изменение решило проблему.
Для контрольного упражнения опишите успешное правило словами, прежде чем двигаться дальше: какую ось оно использовало и как оно располагало лягушек относительно кувшинок. На более поздних уровнях идеи могут сочетаться, поэтому такое объяснение более полезно, чем запоминание строки без ее контекста. Это руководство не предоставляет придуманного полного списка ответов и не утверждает, что решение игры подтверждает профессиональные навыки CSS. Связанная страница воспроизведения предоставляет редактору элементы управления и точное определение задач; центр поддерживает понимание и практику на всех уровнях, с которыми вы действительно сталкиваетесь.
Например, если правило изменяет стрелки по вертикали, когда вы планировали горизонтальное перемещение, проверьте flex-direction и определите текущую главную ось, прежде чем выбирать другое значение. Произнесите соотношение вслух: это свойство меняет распределение вдоль главной оси, и главная ось в настоящее время проходит в этом направлении. Затем сделайте одно редактирование и проверьте результат. Как только это сработает, проверьте свое объяснение на видимых кувшинках. Это превращает неудачную догадку в идею многократного использования вместо команды, которую вы помните только для одного экрана.
Советы и стратегия для Flexbox Froggy
Отметьте совет для следующей попытки. Этот список не меняет игру и не сохраняет игровой прогресс.
Вопросы и ответы по Flexbox Froggy
Нужно ли мне устанавливать инструмент для программирования?
Нет. Редактор CSS находится внутри браузерной игры.
Это полноценный курс веб-разработки?
Это интерактивная тренировочная игра для освоения концепций flexbox-разметки. Она не заменяет более обширный курс по HTML и CSS.
Кто создал этот проект?
Thomas Park создал Flexbox Froggy. Исходный код распространяется под лицензией MIT, а в записанном обложке используется CC BY 3.0; ссылки на источники приведены ниже.
Почему flex-end меняет сторону после разворота направления?
Начало и конец следуют главной оси, а не фиксированным левому и правому краям. При row-reverse ось начинается справа, поэтому justify-content: flex-end размещает элементы слева. Сначала проверьте flex-direction. align-items регулирует поперечную ось и решает другую задачу размещения.
Управление и полные инструкции
Управление и полные инструкции
Играть в Flexbox Froggy