EduSouza-programmer/Trybe_Exercicio_6-3_Edu_Souza

Para os exercícios a seguir, utilize este playground para testar como as propriedades Flexbox influenciam a disposição dos elementos em um container. Existem outros playgrounds para Flexbox como este, e os links para eles estão nos Recursos adicionais.

Exercício 6-3: CSS Flexbox - Parte 1 - Concluído o/ o/ o/

“Quanto mais você estuda, mais aprende e se aproxima de realizar seu sonhos!”

   

Sobre o Exercício  |   Entrega  |   Licença

🚀 Sobre o Exercício

Para os exercícios a seguir, utilize este playground para testar como as propriedades Flexbox influenciam a disposição dos elementos em um container. Existem outros playgrounds para Flexbox como este, e os links para eles estão nos Recursos adicionais. Como os exercícios serão feitos na própria plataforma, crie um diretório em seu repositório para o site número 1 (problema do sapo) e outra para o site número 2 (problema das torres).

• Faça os exercícios de 1 a 13 neste site. O seu objetivo é colocar os sapos em cima de suas respectivas folhas.
• Neste segundo link, complete os exercícios de 1 a 9. Seu objetivo aqui é posicionar as torres de defesa para que elas abatam os inimigos. Você terá de pensar qual é a melhor posição para cada torre. Ps:Exercício realizado no site conforme solicidado.

Entrega

Sumário

Parte-1

• 1. Bem-vindo ao Flexbox Froggy, um jogo onde você ajuda Froggy e seus amigos escrevendo...

• 2. Use justify-contentnovamente para ajudar essas rãs a chegarem aos nenúfares...

• 3. Ajude os três sapos a encontrar seus nenúfares apenas usando justify-content. Desta vez...

• 4. Agora, os nenúfares nas bordas foram levados para a costa, aumentando o espaço...

• 5. Agora use align-items para ajudar as rãs a chegarem ao fundo do tanque...

• 6. Conduza o sapo para o centro da lagoa usando uma combinação de justify-contente align-items.

• 7. Os sapos precisam cruzar o lago novamente, desta vez para alguns nenúfares...

• 8. As rãs precisam ficar na mesma ordem que seus nenúfares usando flex-direction. Esta...

• 9. Ajude as rãs a encontrar sua coluna de nenúfares usando flex-direction. Esta propriedade...

• 10. Ajude as rãs a pegar seus próprios nenúfares. Embora pareçam próximos...

• 11. Ajude as rãs a encontrar seus nenúfares usando flex-directione...

• 12. Ajude as rãs a encontrar seus nenúfares usando flex-directione justify-content.

• 13. Ajude as rãs encontrar seus lilypads usando flex-direction, justify-contente align-items.

Exercícios [Meus códigos]

1°

Bem-vindo ao Flexbox Froggy, um jogo onde você ajuda Froggy e seus amigos escrevendo código CSS! Guie este sapo até a vitória-régia à direita usando a justify-contentpropriedade, que alinha os itens horizontalmente e aceita os seguintes valores:

• flex-start: Os itens são alinhados à esquerda do contêiner.
• flex-end: Os itens são alinhados ao lado direito do contêiner.
• center: Os itens são alinhados no centro do contêiner.
• space-between: Os itens são exibidos com espaçamento igual entre eles.
• space-around: Os itens são exibidos com espaçamento igual ao redor deles.

Por exemplo, justify-content: flex-end;moverá o sapo para a direita.

Resposta:

Código CSS

#pond {
    display: flex;
    justify-content: flex-end;
}

 

2°

Use justify-contentnovamente para ajudar essas rãs a chegarem aos nenúfares. Lembre-se de que essa propriedade CSS alinha os itens horizontalmente e aceita os seguintes valores:

• flex-start: Os itens são alinhados à esquerda do contêiner.
• flex-end: Os itens são alinhados ao lado direito do contêiner.
• center: Os itens são alinhados no centro do contêiner.
• space-between: Os itens são exibidos com espaçamento igual entre eles.
• space-around: Os itens são exibidos com espaçamento igual ao redor deles.

Resposta:

Código CSS

#pond {
    display: flex;
    justify-content: center;
}

 

3°

Ajude os três sapos a encontrar seus nenúfares apenas usando justify-content. Desta vez, os nenúfares têm muito espaço ao seu redor. Se você se esquecer dos valores possíveis para uma propriedade, passe o mouse sobre o nome da propriedade para visualizá-los. Experimente pairar sobre justify-content.

Resposta:

Código CSS

#pond {
    display: flex;
    justify-content: space-around;
}

 

4°

Agora, os nenúfares nas bordas foram levados para a costa, aumentando o espaço entre eles. Use justify-content. Desta vez, os nenúfares têm espaçamento igual entre eles.

Resposta:

Código CSS

#pond {
    display: flex;
    justify-content: space-between;
}

 

5°

Agora use align-items para ajudar as rãs a chegarem ao fundo do tanque. Esta propriedade CSS alinha os itens verticalmente e aceita os seguintes valores:

• flex-start: Os itens são alinhados ao topo do contêiner.
• flex-end: Os itens são alinhados ao fundo do recipiente.
• center: Os itens são alinhados no centro vertical do contêiner.
• baseline: Os itens são exibidos na linha de base do contêiner.
• stretch: Os itens são esticados para caber no contêiner.

Resposta:

Código CSS

#pond {
    display: flex;
    align-items: flex-end;
}

 

6°

Conduza o sapo para o centro da lagoa usando uma combinação de justify-contente align-items.

Resposta:

Código CSS

#pond {
    display: flex;
    justify-content: center;
    align-items: center;
}

 

7°

Os sapos precisam cruzar o lago novamente, desta vez para alguns nenúfares com bastante espaço ao redor deles. Usando uma combinação de justify-contente align-items.

Resposta:

Código CSS

#pond {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

 

8°

As rãs precisam ficar na mesma ordem que seus nenúfares usando flex-direction. Esta propriedade CSS define a direção em que os itens são colocados no contêiner e aceita os seguintes valores:

• row: Os itens são colocados da mesma forma que a direção do texto.
• row-reverse: Os itens são posicionados opostos à direção do texto.
• column: Os itens são colocados de cima para baixo.
• column-reverse: Os itens são colocados de baixo para cima.

Resposta:

Código CSS

#pond {
    display: flex;
    flex-direction: row-reverse;
}

 

9°

Ajude as rãs a encontrar sua coluna de nenúfares usando flex-direction. Esta propriedade CSS define a direção em que os itens são colocados no contêiner e aceita os seguintes valores:

• row: Os itens são colocados da mesma forma que a direção do texto.
• row-reverse: Os itens são posicionados opostos à direção do texto.
• column: Os itens são colocados de cima para baixo.
• column-reverse: Os itens são colocados de baixo para cima.

Resposta:

Código CSS

#pond {
    display: flex;
    flex-direction: column;
}

 

10°

Ajude as rãs a pegar seus próprios nenúfares. Embora pareçam próximos, vai demorar tanto flex-directione justify-contentpara levá-los lá. Observe que, ao definir a direção para uma linha ou coluna invertida, o início e o fim também são invertidos.

Resposta:

Código CSS

#pond {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

 

11°

Ajude as rãs a encontrar seus nenúfares usando flex-directione justify-content. Observe que quando a direção flexível é uma coluna, justify-content muda para vertical e align-items horizontal.

Resposta:

Código CSS

#pond {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

 

12°

Ajude as rãs a encontrar seus nenúfares usando flex-directione justify-content.

Resposta:

Código CSS

#pond {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

 

13°

Ajude as rãs encontrar seus lilypads usando flex-direction, justify-contente align-items.

Resposta:

Código CSS

#pond {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-end;
}

 

Licença

Este projeto está licenciado sob a Licença MIT - consulte LICENSE para maiores detalhes.