Por padrão, não seria 1? | Flexbox: posicione elementos na tela

2
respostas

por João Henrique da Silva Schinato

| 26k xp | 3 posts

Engenheiro

Boa noite.

A pergunta é sobre:

Texto da pergunta...

                                    *    Imagine que no nosso site temos um video do Youtube, imagine que mesmo se o usuário diminuir a tela, o nosso video não deva diminuir de tamanho. Como podemos fazer isso?

**Imagine que nosso vídeo é um flex item e que o código HTML é o que segue:
Vantagens do Alurinha
- Estude onde quiser
- Novos cursos todos os meses
- Cursos compatíveis com o mercado

Podemos simplesmente colocar a propriedade flex-shrink no elemento, por exemplo:

.videoSobre-video {
flex-shrink: 0
}*

Não seria por padrão, 1? Grow: 0 e shrink: 1?

2 respostas

por Luan Alves

| 427.6k xp | 555 posts

Monitor em Desenvolvimento Front-End

11/08/2022

Olá, João! Como vai?

Para definir o quanto um item deve encolher ou não, quando o container no qual ele está inserido diminui, a propriedade flex-shrink deve ser aplicada.

E quando queremos definir quanto um item deve se expandir ou não, quando o seu container estiver maior, aí utilizamos a propriedade flex-grow.

O valor por padrão da propriedade flex-grow é 0, e da flex-shrink é 1.

Consegui ajudar em sua dúvida?

Surgindo outras, pode contar com a gente! :)

por Luan Alves

| 427.6k xp | 555 posts

Monitor em Desenvolvimento Front-End

11/08/2022

A, um detalhe importante, quando aplicamos display: flex, todos os itens vão encolher igualmente, na mesma proporção, o flex-shrink deve ser utilizado apenas quando queremos que um item encolha mais ou menos que os seus irmãos.

Vantagens do Alurinha