FLEXBOX CSS! Como posicionar elementos na página web - parte 1

Eu sei que posicionar elementos em uma página web às vezes parece uma tarefa complicada, porém com Flexbox fica muito mais fácil fazer isso no CSS! Aprenda nesse vídeo a utilizar todas as propriedades dessa ferramenta no nosso elemento pai/container e acompanhe os próximos vídeos desse tema 😊
Quer entrar no mercado de trabalho tech? Dá uma conferida na plataforma da GeekHunter, o maior marketplace especializado na contratação de desenvolvedores da América Latina com cadastro totalmente gratuito: bit.ly/37HoA5e
Possui alguma dica ou correção? Comente aqui embaixo para o pessoal também poder acompanhar, e compartilhe a sua experiência também 👩🏻‍💻
------------------------------------------------------------------------------------------------------------------
Links importantes:
Cadastro GeekHunter: bit.ly/37HoA5e
Código exemplo do vídeo: github.com/rafaballerini/Flex...
Guia Flexbox: css-tricks.com/snippets/css/a...
Minhas redes sociais: beacons.ai/rafaballerini
Comunidade no Discord: / discord
-------------------------------------------------------------------------------------------------------------------
índice do vídeo:
00:00 - Introdução
00:12 - Conheça a GeekHunter
01:15 - O que é Flexbox
02:30 - HTML e CSS do nosso exemplo
04:16 - Display: flex;
05:27 - Flex-direction
06:34 - Justify-content
08:52 - Align-items
12:28 - Flex-wrap
13:38 - Flex-flow
14:15 - Align-content
16:00 - Gap, row-gap e column-gap
17:55 - Revisão
#flexbox #css #frontend

Rafa, precisamos desmistificar esse conceito de que professores na área de TI não sabem ensinar, e vc é a maior prova disso. Parabéns pela didática e eloquência maravilhosa ao falar desses conteúdos ♥

[@NickBan]

Pelo amor! Tá dando de mil a zero em muito curso pago por aí! Nasceu para ensinar! Só essa aula mesmo para fazer eu entender este conteúdo! Parabéns e obrigado! Excelente!

[@bonekazz-8441]

Rafa e Guanabara, os deuses da didática na programação. Aprendi muita coisa com facilidade graças a vcs dois

[@kennethwiller4951]

Parabéns Rafa, sua didática é incrível!!! já tô esperando a parte 2

[@laurirodriigues]

Que didádica maravilhosa, faz tudo parecer bem mais fácil. Seus vídeos me ajudam muito, ja to esperando a parte 2 ♥ ♥

[@rafaellaballerini]

aaaaaaaaa muitissimo obrigada Lauri! Fico feliz que tenha gostado

[@danycoutinho3796]

Muito obrigado pela explicação ☺️🙏 Esperando a parte 2 e o projeto prático 🤩

[@nelsonsoares2281]

Incrível, essa aula me ajudou muito, Obrigado Rafa ansioso pela próxima. Rafa faz um outra série dessa falando sobre css grid, com a sua didática sei que vou poder entender e obrigado por compartilhar esse conhecimento 😊

[@viniciussousa2284]

Que didática incrível. Já vi vários vídeos sobre o assunto, mas nem um tão simples como este.

[@LucasFRodolfo]

Sensacional Rafa, ganhou mais um inscrito, conteúdo completinho. adorei!

[@joegrandao]

Muito bem explicado. Parabéns.

[@jeffersonallan4903]

Cara, sério, tudo se torna mais fácil com essa didática incrível e simpatia que você tem, Rafa, mt obrigado, te desejo todo sucesso do mundo.

[@DeyvsonLucas-mb8zp]

Da até gosto de assistir os seus vídeos, top de mais!

[@alexanderleal8303]

Adoro sua didática, tem me ajudado muito nesse início. Ansioso para os próximos projetos práticos ❤️❤️❤️

[@pvsoftware]

Impressionado com seu trabalho, tenho 30 anos de atuação na área e vc nos mostra o quanto é importante evoluir, não somente no aspecto profissional mas também em relação a exposição do nosso trabalho, vc é fora de série, continue assim

[@rosanadeveloper8204]

Simplesmente INCRIVEL sua explicação! obg

[@RafaPaffile]

Sua didática é incrível. E gostei bastante do fato de explicar cada uma das opções de cada tag.

[@felipeassumpcao3039]

Já deixei o like, porque conteúdo sei que é de qualidade

[@Leo-be2mt]

Muito daora essa dinâmica de ir revisando as coisas conforme explica, é um diferencial bacana e que poucos canais fazem. Vídeo top.

[@YasmimSantos637]

A melhor aula de FLEXBOX que eu encontrei ,muito obrigada Rafa💜

[@illdomybest481]

Obrigado, abriu minha mente. Grato demais!

[@lucasludtke3631]

Que aula proveitosa, didática excelente, parabéns, esperando a pt 2.

[@valdeirbarbosa637]

Perfeito, obrigado pela aula !!!!

[@karynlais8522]

És incrível, sério!

[@joaoPaulo-gi5pg]

Muito obrigado! Você arrasa D+!!

[@rafaelmontenegro4749]

Rafa ótimo vídeo, bem explicativo e que dá para compreender bem, ajuda bastante para quem está começando no HTML e CSS, pude aprimorar e lembrar bastante coisa com esse vídeo. Aguardando a parte 2👍🏾👍🏾🧑🏿‍💻

[@mrkyotolofi5032]

que pessoal maravilhosa, saiba que você serve de inspiração para muitos devs!

[@sorayaalribeiro4568]

Nossa ficou bem claro!!!! claríssimo!! Muito obg

[@thadeurios6664]

Que ótima didática, estou retornando a área de T.I, em especifico front-end. Estudando e absorvendo o máx. possível, mas um conteúdo por vez. Vídeo top. Aguardando os próximos.

[@rdrdigital]

Rafaella, encontrei teu canal por acaso, sem palavras, simpatia e didática incrível. Parabéns!

[@MatheusGoncalves-wl7pp]

Mais didático que isso impossível. Agora esse assunto entra na minha cabeça.

[@mateusbritto]

Parabéns! Abriu minha mente. Obrigado!

[@vit0riadominique]

Caramba amei seu canal!! Faço ensino médio integrado com curso de DS desenvolvimento de software/sistemas é uma área mttt daoraaaa!! 💕 Amei que tem pessoas que compartilham suas experiências desse tipo de conteúdo aqui no KZbin!!

[@vmdimoveiseinvestimentos7395]

Muito bem explicado e abordado. Gostei muito!

[@aprendizdefunileiro9281]

Excelente vídeo Rafa, ajudou muito. Deus abençoe sua vida grandemente !

[@joao_buda]

ESSE VIDEO É UMA OBRA PRIMA ME SALVA SEMPRE QUE PRECISO PARABENS

[@laissa1207]

Obrigada pelo conteúdo, Rafa! Ansiosa pela parte 2.

[@jhinassam4528]

Simplesmente impressionante, didática excelente, permite assimilar o conteúdo de forma fácil!

[@mamutygamerfurtivo3783]

Parabéns pela didática. Excelente.

[@rebecaoliveira4047]

Obrigada Rafa, finalmente consegui entender sobre flexbox assistindo seu vídeo.

[@ikao5569]

Que conteúdo maravilhoso, e os momentos de revisão foram muito bons para fixação do conteúdo. Obrigado pelo conteúdo!

[@animesderrotados8223]

Eu estava procurando exatamente esse tipo de vídeo: organizado, técnico, prático e didático. É muito difícil achar um vídeo com esse tipo de profundidade sobre um assunto específico em css.

[@cleversonareaspinheiro5688]

Simplesmente maravilhosa !!!

[@anapaulaalmeidapinheiromor3542]

Perfeito o vídeo! Simples, claro, didático, ideias bem estruturadas. Para mim que estou no início dos estudos de front foi mesmo perfeito. Parabéns Rafa, vc é fera, seus vídeos me ajudam muuuito!! ❤

[@marcosantoniobueno6336]

Maravilhosa, eu estou aprendendo sempre com vc.

[@jeftegoncalves1548]

Obrigado Rafa, seus vídeos são muito bons, sua didática é ótima!

[@marcosantoniosouzapereirad6817]

Que vídeo profissional, que explicação completa e ao mesmo tempo fácil de entender.

[@pamelacrzs]

adorei parabéns pela explicação. 😊😊❤

[@wanderleydoprado6247]

Rafa,acompanho o seu canal há muito tempo,mas nunca tinha visto uma explicação tão didática e técnica da sua parte. A sua alegria,juventude,carisma e beleza é cativante.Parabens é desejo cada vez mais sucesso pra você.

[@gabrieloliveira1951]

Muito bom esse tipo de conteudo É essencial aprender essas propriedades De ppuco a pouco começamos a criar um site sem muitas dificuldades

[@isabellealmeida6292]

Obrigada pelo vídeo esclarecedor, você manda muito bem na explicação.

[@andersonvieira7596]

Eu estava procurando esse tipo vídeo estava com dificuldade e agora ficou mais esclarecedor tks 💡✔️

[@fabiojorge8999]

Só tenho que agradecer por tirar um tempinho do seu dia agitado para ensinar sobre esse tema. Com certeza que , além de mim, está ajudando muita gente. Obrigado por sua humildade muita luz em sua vida e trajetória🌟🌟

[@joaojpnj]

Didática sensacional. Parabéns!!!!

[@vicentebruno2538]

Parabéns pelo vídeo, muito didático e completo

[@taironiofilho9533]

Eu estou no mercado de desenvolvimento a menos de 6 meses e sempre vejo os videos da Rafa pra tirar dúvidas e aprender mais coisas. Muito grato pelo conteúdo!

[@echeapmidia2009]

Tem pessoas que nasceram com dom pra ensinar parabéns pelo seu conteúdo você faz parecer tudo simples ❤❤❤

[@larissacoelhomendes2955]

Muito bom o vídeo e as explicações!!

[@julia-mj9er]

que didática maravilhosa!!!!! tô impressionada, te segui aqui no youtube a partir de um vídeo de setup e não sabia que você dava aulas! ganhou uma fã e admiradora

[@filipesantos6623]

Esse assunto estava parecendo coisa de outro mundo pra mim, até que encontrei esse vídeo e vi que tudo é muito simples. Obrigado, Rafa! Parabéns pela didática.

[@gabrielapaulinideutner3180]

Rafa você é a melhor professora de CSS que eu já conheci, meus parabéns pela didática maravilhosa, aprendi git graças a você e estou aprendendo CSS contigo também! Você é muito maravilhosa

[@juliofurtado9413]

Amo seus vídeos!!

[@gabrielassis4210]

melhor vídeo explicativo de flexbox que vi

[@alanalves5030]

Esse sempre será o melhor vídeo explicando FLEX-BOX

[@Felipe2x2]

Top d mais. Bonita e super inteligente, parabéns.

[@patriciaalbuquerque9079]

Rafa, que vídeo maneiro! Já estou esperando a segunda parte! Bjs.

[@suzana-passos]

Conteúdo sensacional, Rafa! Tô estudando front, e empaquei nessa parte em um mini projeto com css e html, você ajudou demais! Obrigada! 💚

[@erickgarciacosta]

Melhor vídeo que encontrei sobre o assunto! Parabéns de verdade!

[@CyberWorld7x]

Aquele link me ajudou bastante, obrigado Rafa!

[@alexandremedeiros7490]

Perfeita explicação.

[@AnaSilva-kg5eh]

Muito bom, muito útil, sensacional ❤

[@joaomarcosdefreitasrocha9742]

Um conteúdo que venho tentando entender em semanas, vem a Rafa e me ensina em minutos. kkkk Obrigado Rafa😊😘

[@fabricadenegocios]

SUPER AULA, PARABÉNS.

[@edsongomes6724]

você é fantástica. Parabéns eu passo o dia vendo seus videos e venho aprendendo cada vez mais.

[@valdemirochaves]

Já assisti muitas aulas de flexbox mas esta era a que faltava para eu entender de uma vez por todas. Parabéns pela didática. Obrigado !

[@luanamusial6127]

Perfeita, erra nunca 😭😭😭❤❤❤

[@eder.martines]

Parabéns pela didática! Direta e objetiva. Parabéns!

[@jonnystwart7832]

Nâo me canso de assistir suas aulas. Explicação SUPIMPA. Meus PARABÉNSSSSS. Sou inscrito há mais de um ano.

[@senhorpesadelo8137]

muito boa a sua explicação, agradeço me ajudou bastante

[@ThiagoSouza-yl9fe]

Nem queria esse vídeo né, te amo rafa te amo

[@andrermatos90]

melhor explicação sobre o assunto no youtube

[@_Recic]

Você é demais ! Obrigado🥺

[@anadycarvalho4925]

Parabéns...Aula Top!!! Obrigada por compartilhar conhecimentos. #partiu assistir parte 2.

[@Rodrigo-dz4vw]

incrível estava precisando dessa aula.

[@CarlosDaniel_24]

Mais explicado do que isso impossível! 😁 Muita boa sua didática!

[@scokera4366]

Sensacional, me ajudou muito!!!

[@francianelark2720]

Tu é um anjo na Terra mulher

[@TakaMuari]

MULHER VOCÊ É SIMPLESMETE PERFEITA

[@halcsiktecnologia3200]

Muito obrigado pela explicação. Simples, clara e direta. Parabés pelo canal!

[@siqueirab]

Rafa, sua didática é maravilhosa. Finalmente consegui compreender. Obrigada!

[@climberuy]

Que video massa! parabéns!!

[@jnproducoesmixagensestream7107]

Parabens mandou muito nessa aula ja virei seu fã !!!!

[@Douglas_jp]

Didática sensacional ! Aprendi muito 🙏Obrigado !

[@DennisJCarvalho]

Parabéns Rafaella pela didática ... Tu nasceu para dar aula de programação ... muito prático sua explicação ... show de bola!

[@fabioj.andrade4770]

Parabéns, foi muito clara e objetiva, melhor aula de CSS que já assisti !

[@Robertaspsp]

Obrigada 🩷🩷 ajudou muito!

[@cassiafigueiredo4546]

incrível, tudo muito claro!!

[@aciolijoao8079]

Didática sensacional. Me interessei por programação front-end no inicio do ano, em meio as pesquisas encontrei o seu canal, e desde então eu acompanho, e quando me surgem dúvidas, é o primeiro local que venho procurar. Parabéns, ansioso pela parte 2 🤗

[@gabriellebrumer4856]

Amei, ficou tudo tão claro! 😻

[@AndersonSantos-py2co]

Que sorriso irradiante! Explicação perfeita, didática leve, iluminou a minha mente!

[@yurimoraes9]

Realmente o único problema de aprender sozinho é saber o que e em que ordem aprender, pois tudo está disponível na internet e seu conteúdo prova isso, didática ótima e prática. Essa aula está muito mais concernente que muitas aulas de cursos caros, sei pois paguei para ver. Parabéns!