Entrar Ainda não tem acesso?
1
resposta

Desafio.5

Referente ao curso CSS: Flexbox e layouts responsivos, no capítulo Vídeos flex-grow e atividade Desafio: flex-shrink

por Estanislau Antonio da Silva Junior
| 55.5k xp | 183 posts

Css.

.item-1 {
    background-color: #d34f26; 
    flex-shrink: 5;
}

.item-2 {
    background-color: #68b6e2;
    flex-shrink: 1;
}

.item-3 {
    background-color: red;
    flex-shrink: 1;
}

.item-4 {
    background-color: rgb(0, 217, 255);
    flex-shrink: 1;
}
1 resposta
por Mike de Sousa
| 1414k xp | 2578 posts
Alura Scuba Team Suporte Educacional

Olá, Estanislau, como vai?

Para que os dois itens do meio encolham mais do que os das extremidades, você pode aumentar o valor de flex-shrink dos itens 2 e 3 em relação aos itens 1 e 4. Por exemplo:

.item-1 {
    background-color: #d34f26; 
    flex-shrink: 1;
}

.item-2 {
    background-color: #68b6e2;
    flex-shrink: 5;
}

.item-3 {
    background-color: red;
    flex-shrink: 5;
}

.item-4 {
    background-color: rgb(0, 217, 255);
    flex-shrink: 1;
}

Dessa forma, os itens do meio encolherão mais quando o container diminuir de tamanho.

Qualquer dúvida, o fórum está à disposição.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!