Визначте вісь перед вибором властивості 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 змінює поперечну вісь і розв’язує іншу задачу розміщення.