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

  Рет қаралды 186,994

Rafaella Ballerini

Rafaella Ballerini

Күн бұрын

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

Пікірлер: 445
2 жыл бұрын
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
@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
@bonekazz-8441 2 жыл бұрын
Rafa e Guanabara, os deuses da didática na programação. Aprendi muita coisa com facilidade graças a vcs dois
@flayer2011
@flayer2011 2 жыл бұрын
Nossa que mina sabia inteligente.. parabéns!!!
@gabrielapaulinideutner3180
@gabrielapaulinideutner3180 5 ай бұрын
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
@filipesantos6623
@filipesantos6623 4 ай бұрын
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.
@rebecaoliveira4047
@rebecaoliveira4047 7 ай бұрын
Obrigada Rafa, finalmente consegui entender sobre flexbox assistindo seu vídeo.
@laurirodriigues
@laurirodriigues 2 жыл бұрын
Que didádica maravilhosa, faz tudo parecer bem mais fácil. Seus vídeos me ajudam muito, ja to esperando a parte 2 ♥ ♥
@rafaellaballerini
@rafaellaballerini 2 жыл бұрын
aaaaaaaaa muitissimo obrigada Lauri! Fico feliz que tenha gostado
@kennethwiller4951
@kennethwiller4951 2 жыл бұрын
Parabéns Rafa, sua didática é incrível!!! já tô esperando a parte 2
@lucasludtke3631
@lucasludtke3631 2 жыл бұрын
Que aula proveitosa, didática excelente, parabéns, esperando a pt 2.
@laissa1207
@laissa1207 2 жыл бұрын
Obrigada pelo conteúdo, Rafa! Ansiosa pela parte 2.
@nairanascimento2266
@nairanascimento2266 2 жыл бұрын
amei, to pronta pra proxima!!
@arthurdias7678
@arthurdias7678 2 жыл бұрын
ai meu deus o tanto que eu bati cabeça no meu técnico tentando alinhar divkkkkkkkk didatica perfeita parabens
@juliofurtado9413
@juliofurtado9413 Жыл бұрын
Amo seus vídeos!!
@rdrdigital
@rdrdigital Жыл бұрын
Rafaella, encontrei teu canal por acaso, sem palavras, simpatia e didática incrível. Parabéns!
@danycoutinho3796
@danycoutinho3796 2 жыл бұрын
Muito obrigado pela explicação ☺️🙏 Esperando a parte 2 e o projeto prático 🤩
@cleversonareaspinheiro5688
@cleversonareaspinheiro5688 2 жыл бұрын
Simplesmente maravilhosa !!!
@cassiafigueiredo4546
@cassiafigueiredo4546 11 күн бұрын
incrível, tudo muito claro!!
@fabricadenegocios
@fabricadenegocios Жыл бұрын
SUPER AULA, PARABÉNS.
@jeftegoncalves1548
@jeftegoncalves1548 2 жыл бұрын
Obrigado Rafa, seus vídeos são muito bons, sua didática é ótima!
@ERI22176
@ERI22176 2 жыл бұрын
Valeu Rafa, como sempre entregando um conteúdo incrível, vlw ☕☕
@alexanderleal8303
@alexanderleal8303 2 жыл бұрын
Adoro sua didática, tem me ajudado muito nesse início. Ansioso para os próximos projetos práticos ❤️❤️❤️
@Leo-be2mt
@Leo-be2mt 2 жыл бұрын
Muito daora essa dinâmica de ir revisando as coisas conforme explica, é um diferencial bacana e que poucos canais fazem. Vídeo top.
@felipeassumpcao3039
@felipeassumpcao3039 2 жыл бұрын
Já deixei o like, porque conteúdo sei que é de qualidade
@CanalWebtechTV
@CanalWebtechTV 2 жыл бұрын
Conteúdo TOP. Parabéns.
@eder.martines
@eder.martines 2 жыл бұрын
Parabéns pela didática! Direta e objetiva. Parabéns!
@karynlais8522
@karynlais8522 Жыл бұрын
És incrível, sério!
@sussy3778
@sussy3778 2 жыл бұрын
Suas aulas são ótimas, continue assim, ajudou bastante!
@Douglas_jp
@Douglas_jp 2 жыл бұрын
Didática sensacional ! Aprendi muito 🙏Obrigado !
@valdeirbarbosa637
@valdeirbarbosa637 Жыл бұрын
Perfeito, obrigado pela aula !!!!
@joaoPaulo-gi5pg
@joaoPaulo-gi5pg Жыл бұрын
Muito obrigado! Você arrasa D+!!
@andrermatos90
@andrermatos90 Жыл бұрын
melhor explicação sobre o assunto no youtube
@climberuy
@climberuy Жыл бұрын
Que video massa! parabéns!!
@joegrandao
@joegrandao 2 жыл бұрын
Muito bem explicado. Parabéns.
@RodrigoKulb
@RodrigoKulb 2 жыл бұрын
Que aula maravilhosa parabéns!
@AnaSilva-kg5eh
@AnaSilva-kg5eh Жыл бұрын
Muito bom, muito útil, sensacional ❤
@julia-mj9er
@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
@gabriellebrumer4856
@gabriellebrumer4856 2 жыл бұрын
Amei, ficou tudo tão claro! 😻
@alanalves5030
@alanalves5030 Жыл бұрын
Esse sempre será o melhor vídeo explicando FLEX-BOX
@Felipe2x2
@Felipe2x2 9 ай бұрын
Top d mais. Bonita e super inteligente, parabéns.
@DeyvsonLucas-mb8zp
@DeyvsonLucas-mb8zp Жыл бұрын
Da até gosto de assistir os seus vídeos, top de mais!
@carlosspohr
@carlosspohr 2 жыл бұрын
Didática impecável. Parabéns Rafa 💪💪
@larissacoelhomendes2955
@larissacoelhomendes2955 Жыл бұрын
Muito bom o vídeo e as explicações!!
@alexandremedeiros7490
@alexandremedeiros7490 2 жыл бұрын
Perfeita explicação.
@henriqueslvr4773
@henriqueslvr4773 Жыл бұрын
Que vídeo incrivel!
@guilhermechaves3833
@guilhermechaves3833 2 жыл бұрын
Faz vídeos assim só que sobre CSS Grid, por favorrrr 😀❤️
@mrkyotolofi5032
@mrkyotolofi5032 2 жыл бұрын
que pessoal maravilhosa, saiba que você serve de inspiração para muitos devs!
@pvsoftware
@pvsoftware 2 жыл бұрын
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
@MatheusGoncalves-wl7pp
@MatheusGoncalves-wl7pp Жыл бұрын
Mais didático que isso impossível. Agora esse assunto entra na minha cabeça.
@_Recic
@_Recic 2 жыл бұрын
Você é demais ! Obrigado🥺
@clovisjunior4215
@clovisjunior4215 Жыл бұрын
Top, muito show!!!
@mbs2488
@mbs2488 2 жыл бұрын
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
@camilanobre6185
@camilanobre6185 Жыл бұрын
Amei o vídeo! 💓
@jhinassam4528
@jhinassam4528 2 жыл бұрын
Simplesmente impressionante, didática excelente, permite assimilar o conteúdo de forma fácil!
@francianelark2720
@francianelark2720 2 жыл бұрын
Tu é um anjo na Terra mulher
@RafaPaffile
@RafaPaffile 2 жыл бұрын
Sua didática é incrível. E gostei bastante do fato de explicar cada uma das opções de cada tag.
@jeffersonallan4903
@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.
@wanderleydoprado6247
@wanderleydoprado6247 2 жыл бұрын
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ê.
@fabiojorge8999
@fabiojorge8999 2 жыл бұрын
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🌟🌟
@illdomybest481
@illdomybest481 2 жыл бұрын
Obrigado, abriu minha mente. Grato demais!
@anapaulaalmeidapinheiromor3542
@anapaulaalmeidapinheiromor3542 2 жыл бұрын
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!! ❤
@Robertaspsp
@Robertaspsp 2 ай бұрын
Obrigada 🩷🩷 ajudou muito!
@scokera4366
@scokera4366 Жыл бұрын
Sensacional, me ajudou muito!!!
@ikao5569
@ikao5569 Жыл бұрын
Que conteúdo maravilhoso, e os momentos de revisão foram muito bons para fixação do conteúdo. Obrigado pelo conteúdo!
@luanamusial6127
@luanamusial6127 Жыл бұрын
Perfeita, erra nunca 😭😭😭❤❤❤
@viniciussousa2284
@viniciussousa2284 2 жыл бұрын
Que didática incrível. Já vi vários vídeos sobre o assunto, mas nem um tão simples como este.
@marcosantoniosouzapereirad6817
@marcosantoniosouzapereirad6817 Жыл бұрын
Que vídeo profissional, que explicação completa e ao mesmo tempo fácil de entender.
@juliaferreira7707
@juliaferreira7707 Жыл бұрын
me sinto acolhida com o jeito que você explica, muito obrigada !
@patriciaalbuquerque9079
@patriciaalbuquerque9079 Жыл бұрын
Rafa, que vídeo maneiro! Já estou esperando a segunda parte! Bjs.
@erickgarciacosta
@erickgarciacosta Жыл бұрын
Melhor vídeo que encontrei sobre o assunto! Parabéns de verdade!
@mateusbritto
@mateusbritto Жыл бұрын
Parabéns! Abriu minha mente. Obrigado!
@sorayaalribeiro4568
@sorayaalribeiro4568 Жыл бұрын
Nossa ficou bem claro!!!! claríssimo!! Muito obg
@Kay-Sandro
@Kay-Sandro 7 ай бұрын
Aprendi de mais...🙏
@vmdimoveiseinvestimentos7395
@vmdimoveiseinvestimentos7395 Жыл бұрын
Muito bem explicado e abordado. Gostei muito!
@Rodrigo-dz4vw
@Rodrigo-dz4vw 5 ай бұрын
incrível estava precisando dessa aula.
@ThiagoSouza-yl9fe
@ThiagoSouza-yl9fe 2 жыл бұрын
Nem queria esse vídeo né, te amo rafa te amo
@saturn8552
@saturn8552 10 ай бұрын
Simplesmente incrível!
@aprendizdefunileiro9281
@aprendizdefunileiro9281 Жыл бұрын
Excelente vídeo Rafa, ajudou muito. Deus abençoe sua vida grandemente !
@LucasFRodolfo
@LucasFRodolfo 2 жыл бұрын
Sensacional Rafa, ganhou mais um inscrito, conteúdo completinho. adorei!
@mamutygamerfurtivo3783
@mamutygamerfurtivo3783 2 жыл бұрын
Parabéns pela didática. Excelente.
@pamelacrzs
@pamelacrzs 2 жыл бұрын
adorei parabéns pela explicação. 😊😊❤
@anadycarvalho4925
@anadycarvalho4925 Жыл бұрын
Parabéns...Aula Top!!! Obrigada por compartilhar conhecimentos. #partiu assistir parte 2.
@BetoWagner
@BetoWagner 2 жыл бұрын
Parabéns !!!!!!!! Muito bem apresentado!!!
@camilleferreira6083
@camilleferreira6083 Жыл бұрын
Já estou viciada no canal
@rafaelmontenegro4749
@rafaelmontenegro4749 2 жыл бұрын
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👍🏾👍🏾🧑🏿‍💻
@YasmimSantos637
@YasmimSantos637 Жыл бұрын
A melhor aula de FLEXBOX que eu encontrei ,muito obrigada Rafa💜
@eduarrdonobrega
@eduarrdonobrega 2 жыл бұрын
Perfeita, já tinha pesquisado antes se tinha algum vídeo seu explicando FlexBox. Agora tem
@joaojpnj
@joaojpnj Жыл бұрын
Didática sensacional. Parabéns!!!!
@jnproducoesmixagensestream7107
@jnproducoesmixagensestream7107 Жыл бұрын
Parabens mandou muito nessa aula ja virei seu fã !!!!
@rosanadeveloper8204
@rosanadeveloper8204 Жыл бұрын
Simplesmente INCRIVEL sua explicação! obg
@CarlosDaniel_24
@CarlosDaniel_24 Жыл бұрын
Mais explicado do que isso impossível! 😁 Muita boa sua didática!
@MariusHKz
@MariusHKz 2 жыл бұрын
Mandou benzão! Parabéns!
@joaomarcosdefreitasrocha9742
@joaomarcosdefreitasrocha9742 2 жыл бұрын
Um conteúdo que venho tentando entender em semanas, vem a Rafa e me ensina em minutos. kkkk Obrigado Rafa😊😘
@GisellyRock
@GisellyRock 2 жыл бұрын
Voce arrasa! Obrigada...
@fabioj.andrade4770
@fabioj.andrade4770 Жыл бұрын
Parabéns, foi muito clara e objetiva, melhor aula de CSS que já assisti !
@carmemlima7034
@carmemlima7034 7 ай бұрын
Poxa, que aula!! 👏 Sou iniciante em Html e Css. Estou fazendo um projeto pessoal, que é uma pagina e-commerce, so que nas aulas do curso q estou fazendo e que vi ate agora eu nao aprendi sobre o flex-box, entao eu pedi ajuda ao meu amigo chatgpt kkk e ele me mostrou essa propriedade. So que eu precisava entender bem o que é essa propriedade e caí aqui no seu vídeo. Tô entendendo perfeitamente hahaha, e é maravilhosa essa sensação. Obrigada pelo conteúdo 🎉
@cadusousantana
@cadusousantana 2 жыл бұрын
Não tava esperando por esse vídeo, Achei Incrível! :)
@murilobalducci
@murilobalducci 2 жыл бұрын
Você é demais!
@danielsantana5126
@danielsantana5126 2 жыл бұрын
Excelente vídeo mano Obrigado
@luiz.street
@luiz.street 7 ай бұрын
que video incrivel, meus parabens
FLEXBOX CSS! Como posicionar elementos na página web - parte 2
30:54
Rafaella Ballerini
Рет қаралды 51 М.
Aprenda Flexbox em 20 minutos - Tutorial de Flexbox
20:07
Matheus Battisti - Hora de Codar
Рет қаралды 50 М.
DO YOU HAVE FRIENDS LIKE THIS?
00:17
dednahype
Рет қаралды 97 МЛН
Жайдарман | Туған күн 2024 | Алматы
2:22:55
Jaidarman OFFICIAL / JCI
Рет қаралды 1,8 МЛН
Каха и суп
00:39
К-Media
Рет қаралды 4,9 МЛН
WHO LAUGHS LAST LAUGHS BEST 😎 #comedy
00:18
HaHaWhat
Рет қаралды 19 МЛН
pra você que fica adiando seus sonhos
10:26
Mika Serur
Рет қаралды 5 М.
FLEXBOX: Guia Completo para Iniciantes em CSS
19:14
Larissa Kich
Рет қаралды 11 М.
Entendendo o básico de display : flex
20:34
Instrutor Feijó
Рет қаралды 16 М.
Aprenda Flexbox de uma vez por todas! 😍
21:38
Sujeito programador
Рет қаралды 11 М.
DESCOMPLICANDO o CSS Flexbox 🤯  [curso gratuito no final]
33:30
O QUE É CSS? (SELETORES, PROPRIEDADES E VALORES)
10:06
Rafaella Ballerini
Рет қаралды 133 М.
Como é o HTML e CSS de um Estagiário?
18:00
DevMedia
Рет қаралды 267 М.
QUANTO COBRAR POR UM SITE? O que levar em conta e como calcular
21:57
Rafaella Ballerini
Рет қаралды 140 М.
Как слушать музыку с помощью чека?
0:36
iPhone 15 Pro в реальной жизни
24:07
HUDAKOV
Рет қаралды 268 М.
НЕ ПОКУПАЙ СМАРТФОН, ПОКА НЕ УЗНАЕШЬ ЭТО! Не ошибись с выбором…
15:23