“Quanto mais você estuda, mais aprende e se aproxima de realizar seu sonhos!”
Sobre o Exercício | Entrega | Licença
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 outro para o site número 2 (problema das torres).
-
Faça os exercícios de 14 a 24 neste site. O seu objetivo é colocar os sapos em cima de suas respectivas folhas.
-
Neste segundo link, complete os exercícios de 10 a 12. 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.
-
(Opcional) Para finalizar, escolha alguns exercícios antigos como, por exemplo, o portfólio ou até mesmo os projetos de HTML, CSS e JavaScript e estruture as páginas utilizando Flexbox.
-
14. Às vezes, inverter a ordem das linhas ou colunas de um contêiner não é suficiente...
-
15. Use a orderpropriedade para enviar o sapo vermelho ao seu nenúfar.
-
16. Outra propriedade que você pode aplicar a itens individuais...
-
17. Combine ordercom align-selfpara ajudar as rãs a seus destinos.
-
18. Os sapos são todos espremidos em uma única fileira de nenúfares...
-
19. Ajude este exército de sapos a formar três colunas ordenadas usando uma combinação de flex-directione flex-wrap.
-
20. As duas propriedades flex-directione flex-wrapsão utilizadas tantas vezes juntos que a propriedade estenográfica...
-
21. As rãs estão espalhadas por todo o tanque, mas os nenúfares estão agrupados no topo...
-
22. Agora, a correnteza amontoou os nenúfares no fundo. Use align-contentpara guiar os sapos até lá.
-
23. As rãs deram uma festa, mas é hora de voltar para casa. Use uma combinação de flex-directione...
-
24. Traga os sapos para casa uma última vez usando as propriedades...
Às vezes, inverter a ordem das linhas ou colunas de um contêiner não é suficiente. Nesses casos, podemos aplicar a orderpropriedade a itens individuais. Por padrão, os itens têm um valor de 0, mas podemos usar essa propriedade para defini-la também como um valor inteiro positivo ou negativo (-2, -1, 0, 1, 2).
Use a orderpropriedade para reordenar as rãs de acordo com seus nenúfares.
Código CSS
#pond {
display: flex;
}
.amarelo {
order: 1;
}
Use a orderpropriedade para enviar o sapo vermelho ao seu nenúfar.
Código CSS
#pond {
display: flex;
}
.red {
order: -1;
}
Outra propriedade que você pode aplicar a itens individuais é align-self. Esta propriedade aceita os mesmos valores align-itemse seu valor para o item específico.
Código CSS
#pond {
display: flex;
align-items: flex-start;
}
.amarelo {
align-self: flex-end;
}
Combine ordercom align-selfpara ajudar as rãs a seus destinos.
Código CSS
#pond {
display: flex;
align-items: flex-start;
}
.amarelo {
order: 1;
align-self: flex-end;
}
Ah não! Os sapos são todos espremidos em uma única fileira de nenúfares. Distribua-os usando a flex-wrappropriedade, que aceita os seguintes valores:
- nowrap: Cada item é adequado a uma única linha.
- wrap: Os itens são agrupados em linhas adicionais.
- wrap-reverse: Os itens são agrupados em linhas adicionais ao contrário.
Código CSS
#pond {
display: flex;
flex-wrap: wrap;
}
Ajude este exército de sapos a formar três colunas ordenadas usando uma combinação de flex-directione flex-wrap.
Código CSS
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
As duas propriedades flex-directione flex-wrapsão utilizadas tantas vezes juntos que a propriedade estenográfica flex-flowfoi criado para combiná-los. Esta propriedade abreviada aceita o valor de uma das duas propriedades separadas por um espaço.
Por exemplo, você pode usar flex-flow: row wrappara definir linhas e agrupá-las.
Tente flex-flowrepetir o nível anterior.
Código CSS
#pond {
display: flex;
flex-flow: column wrap;
}
As rãs estão espalhadas por todo o tanque, mas os nenúfares estão agrupados no topo. Você pode usar align-contentpara definir como várias linhas são espaçadas umas das outras. Esta propriedade assume os seguintes valores:
- flex-start: As linhas são embaladas na parte superior do contêiner.
- flex-end: As linhas são embaladas no fundo do contêiner.
- center: As linhas são embaladas no centro vertical do contêiner.
- space-between: As linhas são exibidas com espaçamento igual entre elas.
- space-around: As linhas são exibidas com espaçamento igual ao redor delas.
- stretch: As linhas são esticadas para caber no contêiner.
Isso pode ser confuso, mas align-contentdetermina o espaçamento entre as linhas, enquanto align-itemsdetermina como os itens como um todo são alinhados dentro do contêiner. Quando há apenas uma linha, align-contentnão tem efeito.
Código CSS
#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
Agora, a correnteza amontoou os nenúfares no fundo. Use align-contentpara guiar os sapos até lá.
Código CSS
#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
As rãs deram uma festa, mas é hora de voltar para casa. Use uma combinação de flex-directione align-contentpara levá-los aos nenúfares.
Código CSS
#pond {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;
}
Traga os sapos para casa uma última vez usando as propriedades CSS que você aprendeu:
- justify-content
- align-items
- flex-direction
- order
- align-self
- flex-wrap
- flex-flow
- align-content
Código CSS
#pond {
display: flex;
flex-flow: column-reverse wrap-reverse;
align-content: space-between;
justify-content: center;
}
Este projeto está licenciado sob a Licença MIT - consulte LICENSE para maiores detalhes.