FlexBox CSS! Guia atualizado para dominar de uma vez por todas. 

Aeeeh!! Obrigado 🤙 tmj

Valeu pelo apoio!

Muito Obrigado pelo feedback e valeu pelas dicas, já vou tentar aplicar para os próximos! Vlw tmj

Valeu demais por esse comentário e por se inscrever! Mesmo com poucos inscritos, esse tipo de feedback faz vale a pena!! Grande abraço!

opa, Muito obrigado!! 😃

Sempre haha 🙌 valeu por comentar!

Fico feliz de ler isso hahaha. Realmente, essa relações dos eixos não é muito falada, mas simplifica demais o entendimento dessas propriedades!! Estou preparando uma super aula sobre CSS Grid e vou trazer mais uma explicação bem fácil de entender. Fica de olho no canal e não vai se arrepender kkkk! Valeu, mano! Abraço e até mais o/

@@uicodeoficial incrível, pode ter certeza que estarei de olho. Me inscrevi aqui e ativei os sininhos. Aguardando um cursinho de CSS hein hahaha

Valeu!!

Muito obrigado pelo comentário!! Valeu mesmo!

Fico muito feliz em ler esse comentário!! Muito obrigado. Isso aí, pratique bastante... bons estudos e sucesso pra você !!

Opa, Que bom que ajudou! Valeu pelo comentário!!

Muito obrigado 😁 Valeu pelo feedback!

Muito obrigado

Muito obrigado pela força ! Pode ficar de olho que logo logo sairá mais aulas. Grande abraço.

Que massa, cara. Fico feliz em saber. Obrigado pelo feedback e desejo sucesso pro seus estudos! Valeu

Valeu Johnny!!!

Obrigado! Valeu pelo feedback e por sua inscrição!!

Poxa, fico feliz em saber que gostou da aula, muito obrigado!

Muito obrigado 😁

Muito obrigado!! Agradeço seu comentário e a sua inscrição!! Grande abraço! Tmj

Valeu! Maravilha. Então pode ficar de olho aqui no canal. Valeu pelo feedback... sucesso pra você!!

Muito obrigado pelo feedback, muito bom ler isso. Valeu mesmo!

Valeeu!!!

Muito obrigado

👏 👏 🙌 🙌

Muito obrigado! Valeu pelo feedback.

Valeu demais pelo feedback! Fico feliz que tenha ajudado.

Muito obrigado, valeu pelo apoio!

Muito, obrigado pelo comentário. Fico feliz em saber que ajudou!!

Muito obrigado pelo comentário! Fico feliz em saber que te ajudou. Valeu!!!

Que bom que ajudou! Valeu pelo comentário.

Valeu, muito obrigado!!

Valeu pelo feedback! Fico mt feliz em ler isso. Grande abraço e bons estudos!!

Muito obrigado. Valeu por se inscrever!

Muito obrigado!

Muito obrigado pelo feedback. Quanto ao flex, vamos lá: A propriedade flex para um flex-item é uma abreviação de 3 outras propriedades... { flex-grow flex-shrink flex-basis } Então se você quisesse um { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } nesse caso você poderia usar o atalho { flex: 1 1 0%; } Quando você usa um { flex: 1 } você vai estar encurtando ainda mais e vai ser a mesma coise de usar { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } .................................. Como funciona o Flex-grow: Imagine que você tenha um container com largura de 400px e 4 itens com largura de 50px cada... então os itens somados estariam ocupando 200px e sobraria 200px, certo? Se você aplicar um flex-grow nos 4 itens, eles vão crescer de acordo com o espaço que está sobrando... então se todos os itens receberem flex-grow 1, então cada item vai crescer + 50px. Mas agora vamos supor que você coloque flex-grow 2 apenas para o primeiro item e flex-grow 1 para os outros 3, nesse caso os 200px que estão sobrando vai ser dividido em 5 partes, porque ele vai somar todos os flex-grows (200px / 5 = 40px) ... então o primeiro item vai receber 2 partes, ou seja, +80px e os outros 3 vai receber uma parte cada, ou seja +40px pra cada. (Por padrão o flex-grow é igual a 0) Como funciona o Flex-shrink: É a mesma ideia do flex-grow, mas ao invés de crescer os espaços quando está sobrando, vai ser o contrário... se faltar espaço, ele vai ver quanto é o espaço que falta e diminuir o tamanho dos itens de acordo com o número que você definiu o flex-shrink. (Por padrão o flex-shrink é igual a 1) Como funciona o Flex-basis: O flex-basis define qual é o tamanho inicial do item, então mesmo se a largura de um item for 100px, mas se tiver um flex-basis de 150px, então a largura do item será 150px, mas de qualquer forma se o flex-basis for de 50px e o width do item for 100px, então o tamanho será 100px porque o flex-basis define o tamanho inicial, mas ele ainda pode crescer ou diminuir. E você pode usar qualquer unidade de medida para ele, sendo px, em, rem, auto, % etc (Por padrão o flex-basis é auto) A documentação dessa propriedade não é das melhores, mas depois de ler essa explicação talvez fique melhor de entender os exemplos que tem nessas docs: www.w3schools.com/cssref/css3_pr_flex.php developer.mozilla.org/pt-BR/docs/Web/CSS/flex Espero ter ajudado, se ainda tiver dúvidas é só chamar! Grande abraço! tmj

@@uicodeoficial Show de bola professor!! Vc poderia até fazer um layout real aplicando essas tecnicas. Fica massa!

Opa, muito obrigado pelo seu comentário. Pode deixar, já estou preparando mais conteúdo nesse mesmo estilo!!

Opa, muito obrigado! Desculpe pela demora, tive que dar uma pausa, mas agora estou voltando. Você pode inserir texto no arquivo HTML e pode configurar o estilo desse texto usando CSS. As configurações de responsividade, você também pode usar CSS.

Woouu! Muitíssimo obrigado pelo excelente feedback, fico feliz que tenha gostado. Em breve vou trazer mais conteúdos como esse. Valeu, grande abraço!!

Gostei também da ditática, ganhou mais um inscrito!

@@CawiroADM Massa demais, obrigado pela sua inscrição! Grande abraço o/

Opa, desulpe pela demora, eu tive que dar uma pausa no canal, mas estou de volta. Não sei se ainda tem dúvida mas... No CSS Flexbox, a propriedade flex como flex: 1 ou flex: 2 é uma abreviação para flex-grow, flex-shrink, e flex-basis. flex: 1 equivale a flex: 1 1 0%, o que significa que o item pode crescer e encolher proporcionalmente dentro do contêiner, partindo de uma base de 0%. Já flex: 2 significa flex: 2 2 0%, permitindo que o item cresça o dobro em relação ao item com flex: 1 se houver espaço extra disponível... Ou seja, olhe para esse numero como o peso que você deseja que ele tenha, quanto maior o número, maior peso ele vai ter. Na teoria é meio difícil de entender mesmo, tente testar e praticar varias vezes que uma hora vc entende o funcionamento. Para centralizar itens dentro do contêiner, use justify-content: center para alinhamento horizontal e align-items: center para vertical. Isso ajuda a manter seu layout responsivo e bem organizado!

🙌 🙌

Exatamente hahahaha float era um pesadelo! 😂