1
resposta

Desafio Site Flexbox Froggy Level 24

Já vi que resolveram esse desafio com três linhas, porém, eu precisei de quatro linhas.

flex-wrap: wrap-reverse; /* quebra a linha e inverte a ordem */

flex-direction: column-reverse; /* muda a linha para coluna invertida */

justify-content: center; /* centraliza no eixo vertical */

align-content: space-between; /* alinha afastando os itens aos extremos da página */

1 resposta

Oi Valmir, você gostaria de refatorar o código para que ele fique em apenas três linhas. Aqui está o código refatorado:

flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;

Nesse código refatorado, utilizamos a propriedade flex-flow para combinar as propriedades flex-direction e flex-wrap em uma única linha. O valor column-reverse indica que a direção do fluxo será uma coluna invertida, enquanto wrap-reverse quebra a linha e inverte a ordem dos elementos.

Em seguida, definimos a propriedade justify-content como center para centralizar verticalmente os itens.

Por fim, utilizamos a propriedade align-content com o valor space-between para alinhar os itens, afastando-os aos extremos da página.

Lembrando Valmir que, embora o código tenha sido reduzido para três linhas, é importante considerar a legibilidade e a clareza do código ao fazer refatorações. Certifique-se de que o código ainda seja fácil de entender e manter.

Espero ter ajudado!