Muitíssimo obrigado por esse feedback. Eu tento deixar a explicação o mais didático que eu conseguir e saber disso me motiva bastante. Vlw. Grande abraço
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
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/
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
ó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.
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.
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!
Não tem jeito.. RUclips melhor lugar pra estudar !
Sempre haha 🙌 valeu por comentar!
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!! 😃
Excelente amigo. Agora entendi o conceito de flex. Obrigado
... mais um inscrito !!! 👨🏽💻😉
Aeeeh!! Obrigado 🤙 tmj
Melhor guia de flexbox do youtube.
Muito obrigado pelo comentário!! Valeu mesmo!
Voce fala muito bem. Bem tranquilo combinou com a didática ideal que gosto😊
Muitíssimo obrigado por esse feedback. Eu tento deixar a explicação o mais didático que eu conseguir e saber disso me motiva bastante. Vlw. Grande abraço
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!
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
Parabéns pela excelente didática. Muito obrigado.
Muito obrigado pelo comentário. Ler isso me motiva muito. Vlw mesmo!
Excelente aula. Nota 1000
Muito obrigado
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
Gostei sem enrolação, já me escrevi.
Obrigado! Valeu pelo feedback e por sua inscrição!!
ajudou muito, valeu!
Opa, Que bom que ajudou! Valeu pelo comentário!!
brabo demais!!
Muito bom. Parabéns.
Muito obrigado 😁
Ótima explicação!!!
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
Obrigado Leandro!
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
Explica muito bem!👏🏽👏🏽👏🏽
Muito obrigado 😁 Valeu pelo feedback!
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ê !!
Mais um inscrito. Abraço!
Valeu, muito obrigado!!
Top. Cada dia melhor...
Valeu Johnny!!!
Parabens!
Exelente conteudo foi muito bom para meu conhecimento e estudos.
Obrigado!
Poxa, fico feliz em saber que gostou da aula, muito obrigado!
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.
muito bom seu conteudo
Valeu pelo apoio!
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ê!!
Inscrito!!
mutio obrigado 🙏🏻👊
show
Excelente. Parabéns 👍
Muito obrigado, valeu pelo apoio!
Excelente conteúdo e didática. Muito esclarecedor. Parabéns!
Muito obrigado pelo feedback, muito bom ler isso. Valeu mesmo!
Muito bom, me ajudou muito, parabéns.
Que bom que ajudou! Valeu pelo comentário.
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!
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!
ótimo vídeo, ajudou muito
Muito obrigado pelo comentário! Fico feliz em saber que te ajudou. Valeu!!!
Amei
Valeeu!!!
ó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.
Vídeo top mano, Me ajudou demais!!
Valeu demais pelo feedback! Fico feliz que tenha ajudado.
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/
boa
Valeu!!
Good
Ó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!!
up!
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!!
up..
👏 👏 🙌 🙌
😁
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!
hi
😂👌👌👌👌
🙌 🙌
Flexbox veio para acabar com float.😅
Exatamente hahahaha float era um pesadelo! 😂