ฝัง
- เผยแพร่เมื่อ 9 ก.ค. 2023
- 🚀 Bem-vindo ao nosso Guia Atualizado para Dominar o FlexBox CSS! Neste tutorial, você será guiado passo a passo pelas principais características do FlexBox, permitindo criar layouts flexíveis com facilidade.
Eu vou abordar desde os conceitos básicos até técnicas avançadas, o que torna esse vídeo perfeito tanto para iniciantes quanto para desenvolvedores experientes.
![[EP.01] ดูฟรึตอนแรก LOL: Last One Laughing Thailand Thailand หัวเราะทีหลังปังกว่า | Prime Thailand](http://i.ytimg.com/vi/t4KunBRKn3s/mqdefault.jpg)
... mais um inscrito !!! 👨🏽💻😉
Aeeeh!! Obrigado 🤙 tmj
muito bom seu conteudo
Valeu pelo apoio!
boa
Valeu!!
ajudou muito, valeu!
Opa, Que bom que ajudou! Valeu pelo comentário!!
Não tem jeito.. TH-cam melhor lugar pra estudar !
Sempre haha 🙌 valeu por comentar!
Explica muito bem!👏🏽👏🏽👏🏽
Muito obrigado 😁 Valeu pelo feedback!
ganhou mais um inscrito, uma recomendação amigo, tente separar por partes(aqueles cortezinhos que a gente consegue ver quando esta assistindo) o video, para a gente saber de qual assunto se trata
Muito Obrigado pelo feedback e valeu pelas dicas, já vou tentar aplicar para os próximos! Vlw tmj
ate hoje eu nunca vi uma aula tao boa feito a sua nao essa aula foi a melhor aula de flexbox que eu ja vi no youtube😎😎👏👏👏
opa, Muito obrigado!! 😃
Top. Cada dia melhor...
Valeu Johnny!!!
Que aula top, nunca vi ninguém explicando essa relação dos eixos com as propriedades. Valeu ♥
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
Parabéns pela proposta do conteúdo, mais um inscrito.
Muito obrigado
Excelente amigo. Agora entendi o conceito de flex. Obrigado
Amazing.😍
6mil visualizações 531 inscritos, foi uma aula fantastica não tem como nao se inscrever e agradecer com um gostei, youtube é injusto.
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!
Melhor guia de flexbox do youtube.
Muito obrigado pelo comentário!! Valeu mesmo!
Obrigado Leandro!
Excelente conteúdo.
Estava travado em um exercício por conta disso, e consegui resolver.
Agora é continuar praticando para fixar.
Muito Obrigado!
Fico muito feliz em ler esse comentário!! Muito obrigado.
Isso aí, pratique bastante... bons estudos e sucesso pra você !!
Excelente aula. Nota 1000
Muito obrigado
Excelente conteúdo e didática. Muito esclarecedor. Parabéns!
Muito obrigado pelo feedback, muito bom ler isso. Valeu mesmo!
Me inscrevi para te ajudar a alcançar seu objetivo e também aproveitar a aula
Muito obrigado pela força ! Pode ficar de olho que logo logo sairá mais aulas. Grande abraço.
up..
👏 👏 🙌 🙌
Gostei sem enrolação, já me escrevi.
Obrigado! Valeu pelo feedback e por sua inscrição!!
Muito bom. Parabéns.
Muito obrigado 😁
up!
😁
Parabens!
Exelente conteudo foi muito bom para meu conhecimento e estudos.
Obrigado!
Poxa, fico feliz em saber que gostou da aula, muito obrigado!
caramba que aula incrível esta de parabéns, mais um novo seguidor
Muito obrigado!! Agradeço seu comentário e a sua inscrição!! Grande abraço! Tmj
Parabéns tenho uma empresa de apps eu mesmo sou backend porém fico de olho no front🎉
Valeu! Maravilha. Então pode ficar de olho aqui no canal. Valeu pelo feedback... sucesso pra você!!
ótimo vídeo, ajudou muito
Muito obrigado pelo comentário! Fico feliz em saber que te ajudou. Valeu!!!
Muito bom seu trabalho mano. Estou na graduação de ADS e ao mesmo tmempo estudando na EBAC Full Stake Python. Seu conteúdo está me ajudando muito.
Que massa, cara. Fico feliz em saber. Obrigado pelo feedback e desejo sucesso pro seus estudos! Valeu
show
Amei
Valeeu!!!
Muito boa aula! Poderia explicar o uso do flex? Ex: quero aplicar um flex: 1 em determinado flex-item. Valeu!!
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!
Ótima explicação!!!
Muito obrigado!
Good
Excelente. Parabéns 👍
Muito obrigado, valeu pelo apoio!
Adorei esse vídeo, me ajudou demais!!
Parabéns pelo conteúdo!
Muito, obrigado pelo comentário. Fico feliz em saber que ajudou!!
Muito bom, parabéns!
Muito obrigado! Valeu pelo feedback.
Muito bom, sucesso para ti. Já me fiz a inscrição no canal.
Muito obrigado. Valeu por se inscrever!
Vídeo top mano, Me ajudou demais!!
Valeu demais pelo feedback! Fico feliz que tenha ajudado.
Muito bom, me ajudou muito, parabéns.
Que bom que ajudou! Valeu pelo comentário.
ótimo video! Estou iniciando no Flexbox e minha dúvida seria sobre inserir texto deixando o mesmo responsivo! Eu devo inserir texto no arquivo HTML ou CSS? Se fizer um vídeo básico mostrando como é feito seria excelente!!!
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.
Ótimo video você tem uma didática ótima
mto obrigado pelo conteúdo
Valeu pelo feedback! Fico mt feliz em ler isso. Grande abraço e bons estudos!!
Muito bom...continue dando dicas de css por favor!
Opa, muito obrigado pelo seu comentário. Pode deixar, já estou preparando mais conteúdo nesse mesmo estilo!!
Mais um inscrito. Abraço!
Valeu, muito obrigado!!
Excelente didática!!! Nem em cursos caros tive explicações como essas. Meus parabéns! Me inscrevi e vou indicar seu canal para todos os iniciantes como eu.
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/
hi
😂👌👌👌👌
🙌 🙌
Mano. Eu ainda me confundo com os flex: “1”, “2” etc… Tipo em distribuir divs no “container” dando um tamanho maior para uma e um menor pra outra, e trabalhar também nos itens centros das divs.
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!
Flexbox veio para acabar com float.😅
Exatamente hahahaha float era um pesadelo! 😂