Controle do tamanho de itens flexíveis - @CursoemVideo HTML5 + CSS3

Estude pelo nosso site e tire certificado de 40 horas. Curso completo em: www.cursoemvideo.com/curso/curso-html5-e-css3-modulo-5-de-5-40-horas/

[@altcereja]

comecei o cursos em fevereiro e justo hoje alcancei as aulas do mod5! obrigada por todos os ensinamentos professor! 💗🖖

[@ElevaTe.]

Que aula excelente! Muito obrigado mestre Guanabara, caso eu obtenha êxito na minha carreira no mundo da programação espero um dia poder recompensá-lo de alguma maneira por todos esses ensinamentos!

[@willssgg4711]

Falou tudo

[@Markulynoo]

Olá Guanabara, tudo bom? Amigo, eu gostaria do fundo do meu coração que você fizesse um curso de Lua. Lua é sem dúvidas a linguagem de programação que eu me identifiquei, mas nao acho muito conteúdo gratuito dela por aí, e quando acho, a galera não tem uma didática muito legal. Você poderia por favor fazer isso? Eu sei que talvez seja pedir demais, mas quem sabe, né? Kk

[@reginaldopinheiro1333]

Agrdeço os ensinamentos. Acredita que jiz outros cursos e ninguem nunca explicou flex-grow e flex-shrink da forma que você. Nunca tinha entendido muito bem e agora sim eu sei o que eles são.

[@chocolatebom6519]

Tô ainda no módulo 2 um dia chego aqui

[@leonardofree6749]

Para quem ficou com dúvida sobre a proporção: Exemplo: Contêiner: 600px Item 1: flex-basis: 150px, flex-grow: 1 Item 2: flex-basis: 150px, flex-grow: 2 Item 3: flex-basis: 150px, flex-grow: 0 O tamanho total dos itens é a soma entre eles (px): 150px + 150px + 150px = 450px. Como o contêiner tem 600px, o espaço vazio é: 600px - 450px = 150px Agora, vamos calcular em quantas partes o espaço vazio será dividido (flex-grow): Item 1: 1 parte Item 2: 2 partes Total: 3 partes (soma entre os itens) O item 1 crescerá em 1/3 dos 150px, ou seja, uma parte de três, adicionando 50px O item 2 crescerá em 2/3 dos 150px, ou seja, duas partes de três, adicionando 100px Tamanho total dos itens: item 1 = 150px + 50px = 200px item 2 = 150px + 100px = 250px Outro exemplo: Contêiner: 600px Item 1: flex-basis: 100px, flex-grow: 3 Item 2: flex-basis: 50px, flex-grow: 1 Item 3: flex-basis: 100px, flex-grow: 2 O tamanho total dos itens é a soma entre eles (px): 600px - 250px , o espaço vazio é 350px Vamos calcular em quantas partes o espaço vazio será dividido (flex-grow): Item 1: 3 partes Item 2: 1 parte Item 3: 2 partes Total: 6 partes (soma entre os itens) O item 1 crescerá em 3/6 dos 350px, ou seja, uma parte de seis, adicionando 175px. O item 2 crescerá em 1/6 dos 350px, ou seja, duas partes de seis, adicionando 58px O item 3 crescerá em 2/6 dos 350px, ou seja, três partes de seis, adicionando 116px Tamanho total dos itens: item 1 = 100px + 175px = 275px item 2 = 50px + 58px = 108px item 2 = 100px + 116px = 216px O cálculo para encontrar as partes é simples: divida o valor total do espaço vazio (350px) pelo total de partes (6). neste caso o resultado foi 58,33px por parte. Em seguida, multiplique as partes atribuídas a cada item por esse valor: item1 = 3 x 58,33 = 175 item 2 = 1 x 58,33 = 58 item 3 = 2 x 58,33 = 116

[@nathanrodriguez2978]

amigo, acho que você trocou alguns números aí

[@ericsilva4553]

Achei a explicação do Guanabara um pouco confusa. Eu entendi assim: A propriedade flex-grow usa como base de cálculo o valor do flex-basis dos itens. Por exemplo, se eu tenho 3 elementos com flex-basis de 50px, o valor pra base de cálculo será 150px. Agora, vamos considerar as seguintes configurações: item1 flex-grow:0; item2 flex-grow: 2; item 3 flex-grow: 1;. E que o container tem tamanho total 450px. Sempre que o tamanho do container for maior que o valor base (300px), será feito o seguinte cálculo: valor excedente(nesse caso 300px)/soma dos valores flex-grow(3). Dessa forma será feita a divisão do tamanho excedente em 3 partes: cada uma com 100px. O item 2 ganhará 2 partes e o item 3 ganhará 1 parte, no caso, 200px e 100px, totalizando 250px e 150px respectivamente. O mesmo cálculo pode ser feito com o flex-shrink, porém, o que será dividido é o valor que o container tem a menos que o tamanho base. Espero que não tenha ficado confuso

[@ericsilva4553]

É por isso que quando só um item tem flex-grow diferente de zero ele não cresce mais, pq ele divide o excedente e dá tudo pro mesmo item

[@lidiocortez6354]

Respondendo a segunda questão, os elementos aumentarão de tamanho

[@matheusnunesherique3627]

11:30, se o container aumentar os itens vão aumentar junto com ele

[@lidiocortez6354]

Respodendo a questão, os elementos irão sair do container

[@samuelclips3734]

Por favor cria um curso de koltin

[@matheusnunesherique3627]

10:30, os itens irão passar do container

[@rodrigogodoysi]

👏

[@kso7238]

É melhor usar width ou flex-basis?

[@PedrinhoG40]

Tava esperando essa aula Professor ❤❤ é nois!!!

[@luispsk1]

Mais um ótimo vídeo como se pode

[@MateusGuida]

Ainda na espera desse material de apoio.. Ou só está disponível no estudonauta?

[@lucasneves11]

thanks my friend

[@trzinff2565]

Guanabara, você é o melhor

[@kawamsx1002]

Como assim ja tem o modulo 5 nem sabia mas vou começar a maratona

[@degratis2072]

Pensei que ja tinha terminado o curso. 😒

[@kauangames4554]

Olá! 😃

[@gustavola4962]

comentário

[@eduardof5-r4t]

Melhor professor

[@kaioalan5973]

Valeu mestre 🫡

[@alinegomes9084]

maravilhoso 👋👋

[@DESFERRANDOMINHAVIDA]

Melhor professor

[@godmots2_]

Gustavo , faz um curso de back end com a mesma temática do front end, porém apresentando frameworks como Django, flask...

[@viniciuslucca6886]

Finalmente de volta com o módulo 5. Estou acompanhando todos os vídeos desse curso!