Identifique o eixo antes de escolher uma propriedade CSS
Leia os nenúfares alvo do nível e inspecione o arranjo atual dos sapos. Na direção da linha padrão, justify-content funciona ao longo do eixo principal horizontal e align-items ao longo do eixo transversal vertical. Antes de digitar um valor, indique qual eixo você deseja alterar. Esse hábito evita um erro comum: escolher o valor mais adequado para um imóvel que controla uma direção diferente.
Quando flex-direction muda para coluna, os eixos principal e transversal mudam com ela. Reavalie a propriedade em vez de assumir que justify-content sempre significa movimento horizontal. Insira uma alteração CSS no editor e compare as posições resultantes com os alvos. Os sapos são posicionados pelo seu CSS, e não arrastados para o lugar. Use as dicas e propriedades permitidas do nível para manter o experimento vinculado à tarefa realmente mostrada.
Explique uma mudança malsucedida antes de tentar outra
Após uma mudança errar o alvo, pergunte se a propriedade afetou o eixo errado, se o valor escolhido organizou os itens de maneira diferente da sua expectativa ou se a direção atual alterou o significado do layout. Mantenha a parte da regra que você entende e revise uma coisa. Substituir várias propriedades de uma vez pode atingir o objetivo e deixar você sem certeza de qual alteração resolveu o problema.
Para um exercício de revisão, descreva em palavras a regra bem-sucedida antes de prosseguir: qual eixo ela usou e como posicionou os sapos em relação às vitórias-régias. Os níveis posteriores podem combinar ideias, portanto esta explicação é mais útil do que memorizar uma linha sem o seu contexto. Este guia não fornece uma lista de respostas completa inventada nem afirma que a resolução do jogo certifica a habilidade profissional CSS. A página de jogo vinculada fornece controles ao editor e enquadramento exato da tarefa; o centro apoia a compreensão e a prática em todos os níveis que você realmente encontra.
Por exemplo, se uma regra altera os sapos verticalmente quando você pretendia movimento horizontal, inspecione flex-direction e identifique o eixo principal atual antes de selecionar outro valor. Diga a relação em voz alta: esta propriedade altera a distribuição ao longo do eixo principal, e o eixo principal atualmente corre nesta direção. Em seguida, faça uma edição e inspecione o resultado. Quando funcionar, teste sua explicação em relação às vitórias-régias visíveis. Isso transforma uma tentativa fracassada em uma ideia de layout reutilizável, em vez de um comando que você lembra apenas para uma tela.
Dicas e estratégia para Flexbox Froggy
Marque uma dica para praticar na próxima partida. Esta lista não altera o jogo nem salva seu progresso.
Perguntas e respostas sobre Flexbox Froggy
Preciso instalar alguma ferramenta de programação?
Não. O editor CSS está dentro do jogo para navegador.
Este é um curso completo de desenvolvimento web?
É um jogo interativo para praticar conceitos de layout flexbox. Ele não substitui um curso mais abrangente de HTML e CSS.
Quem criou o projeto?
Thomas Park criou Flexbox Froggy. A fonte é licenciada sob a licença MIT e a arte gravada utiliza CC BY 3.0; os links de atribuição estão abaixo.
Por que flex-end muda de lado quando a direção é invertida?
O início e o fim seguem o eixo principal, não bordas fixas da esquerda e direita. Com row-reverse, o eixo começa à direita, então justify-content: flex-end leva os itens à esquerda. Confira flex-direction antes de escolher o alinhamento. align-items ajusta o eixo transversal e resolve outro problema de posição.
Controles e instruções completas
Controles e instruções completas
Jogar Flexbox Froggy