FLEXBOX CSS! Como posicionar elementos na página web

No video

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

Рет қаралды 52,521

Күн бұрын

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! Continue aprendendo nesse vídeo a utilizar todas as propriedades dessa ferramenta nos nossos elementos filhos e acompanhe tanto o vídeo anterior desse tema, quanto o próximo que está por vir! 😊
Candidate-se a trabalhos remotos em software nos Estados Unidos do conforto da sua casa com a plataforma da Turing: www.turing.com...
Faça parte dessa rede formada pelos melhores desenvolvedores do mundo e obtenha trabalhos
remotos em software de longa duração e em tempo integral, com ótimos salários e crescimento
profissional
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 Turing: www.turing.com...
Código início do vídeo: github.com/raf...
Código final do vídeo: github.com/raf...
Guia Flexbox: css-tricks.com...
Palavras chave para usar com flex-basis: developer.mozi...
Alguns joguinhos para treinar Flexbox a partir de agora:
flexboxfroggy....
www.flexboxdefe...
mastery.games/...
Minhas redes sociais: beacons.ai/raf...
Comunidade no Discord: / discord
-------------------------------------------------------------------------------------------------------------------
Índice do vídeo:
00:00 - Introdução
00:22 - Conheça a Turing!
02:52 - Preparação para absorver melhor o conteúdo
03:58 - Relembrando o vídeo anterior
06:48 - Preparando nosso projeto
08:02 - Order
13:50 - Flex-grow
18:31 - Flex-shrink
21:53 - Flex-basis
26:15 - Flex
27:09 - Align-self
28:57 - Dicas finais sobre Flexbox
#flexbox #css #frontend

Пікірлер: 107

@BlankemburgCastanho 2 жыл бұрын

Muito bem explicado Rafa, parabéns! Só tenho uma dúvida, e quanto ao Grid Layout? Qual a diferença entre eles? Seria bacana se fizesse um vídeo mais pra frente falando sobre ele.

@Espiroqueta 2 жыл бұрын

Só queria agradecer imensamente, sério, conheci essa semana o seu canal e está me ajudando MUITO. Estudo ADS e, tenho muita dificuldade (e nem gostei) de linguagens como C, Java, estava quase desistindo disso, mas, me fascinei por HTML, CSS e principalmente JS (Nossa, da pra fazer muita coisa legal!), e seu canal está ajudando demaaaais nessa nova trajetória de estudos!!

@henribalthazar 2 жыл бұрын

Front end sempre salvando vidas

@mvsuguino 2 жыл бұрын

Ctrl + ; (control + ponto-e-vírgula) também comenta/descomenta o código. Não precisa 2 atalhos diferentes.

@antoniofantoni7895 Жыл бұрын

Também uso esse !

@gcbicca Жыл бұрын

Shift + alt +a tbm comenta ou cria as tags de comentário!

@jairoprates4300 3 ай бұрын

Muito mais prático, sempre utilizo esse

@antoniosergiosouzamenezes7235 9 ай бұрын

Ensinar é um dom divino!! Parabéns, vc não tem ideia do quanto tem me ajudado!!

@rafoarte 2 жыл бұрын

Muito obrigado por esses últimos dois vídeos de flex-box, estou começando a usar agora e até então só havia tido explicações rasas sobre o assunto. Ia ser incrível se tivesse uma parte 3 usando a propriedade na prática, parte dois do vídeo Balle Bot :)

@_gabrielfratelli 2 жыл бұрын

É essencial aprender isso pessoal, utilizem sempre flexbox e flexgrid!!! Parabéns rafinha você é um máximo.

@rbiuri 2 жыл бұрын

Muito bom! Hoje gerencio minha startup e pela dificuldade de encontrar devs por um preço acessível, me aventurei a me desenvolver como programador e me deparei com seus vídeos. Sua didática é muito boa e da pra ver o quanto você fica empolgada em ensinar! Meus parabéns pelo trabalho! 👏🏾👏🏾

@LaysllaMatias Жыл бұрын

Você tem vaga na sua Startup? Sou dev jr e gostaria de uma oportunidade :)

@andreforttuna 2 жыл бұрын

Olá, tudo bem? Eu sou gestor de tradego e faço landing Page no elementor. Com base no que sei do elementor facilmente consegui entender seu conteúdo. E não só pelo elementor ter agora a opção de flex, mas suas aulas são muito boas. Uma dica que te dou e é uma dor muito grande do pessoal de lançamento, é a otimização dos sites, que por mais que usemos recursos, nunca será igual a saber usar html e css. Um curso específico para essa área eu compraria ontem. Só com suas aulas consegui fazer uma página de captura, mas por exemplo, não consegui integrar um form feito em html com o active campaign… Te agradeço por seu tempo e seu conteúdo é feito com excelência.

@victorantonio6590 2 жыл бұрын

Didática sensacional. Continua com essas aulas de CSS Rafa, são muito bons. Mesmo que já tenha muita gente ensinando, sempre tem espaço pra pessoas com uma didática tão clean e tão assertiva!

@rebecaoliveira4047 8 ай бұрын

Rafa tu explica muito bem, maravilhosa essa didática oh agora sim estou conseguindo aprender Flexbox. Obrigado mesmo.

@igomaral 2 жыл бұрын

Rafa, obrigado por salvar minha vida! Vc ensina de uma forma incrível, como se estivesse dando aula pra uma pedra e só assim pra gnt conseguir aprender. Parabéns pelo conteúdo

@oCarlos__ 2 жыл бұрын

nem vi o video mais ja queria agradecer, que coencidencia, eu tava nessa parte do curso q eu to vendo, ai dps de 2 aulas sobre isso pensei: ja vou parar por hj, ja vi mt coisa, to com dificuldade nisso ent amanha eu vejo dnv tudo, vou ver uns videos sobre tech pra descontrair, ai abri seu canal e encontrei isso postado a 2 DIAS. Que maravilha!

@felipemarques4197 2 жыл бұрын

Seus vídeos são sensacionais, está me ajudando demais na caminhada de dev. Faça mais vídeos por favor!

@g3luka Жыл бұрын

Gostei muito dos seus vídeos sobre Flexbox. Queria ensinar para um amigo Flexbox mas estava sem tempo de explicar para ele, procurei no Google e apareceu seu vídeo, assisti e achei suas explicações e didática excelentes e já passei para ele. Com certeza passarei os vídeos para outros amigos e colegas. Agora gostaria de ensinar CSS Grid, então, seria bem legal se fizesse um ou mais vídeo explicando mais essa maravilha do CSS. Parabéns pelo trabalho pela sua didática excelente e pelo canal! Tudo de bom, um abraço.

@denercoelho2592 2 жыл бұрын

Me inscrever nesse canal e no da Code By Duda foi a melhor coisa que fiz nesse ano, vocês me ajudam DEMAIS!!!!!!

@edvaldojunior1745 Жыл бұрын

Simplesmente suas aulas são demais! A didática bem simples e direta.

@jeremiasverissimogomes8521 Жыл бұрын

Muito obrigado pelas aula, Balle. Eu estive pensando em seriamente sair dessa área por não conseguir entender muito durante as aulas, mas você me fez ver de outra forma. Obrigado

@4queijos90 2 жыл бұрын

Belo conteúdo. queria muito te pedir um vídeo sobre o que estudar para Analise e desenvolvimento de sistemas/Programação. tipo o básico da matemática q é necessário nessa área para facilitar quando for entrar na faculdade ou outros estudos envolvidos q são essenciais também. adoro o seu conteúdo e acredito em você

@pensando_positivo 2 жыл бұрын

valeu Rafaella... comecei a gostar de front-end por causa de um video seu...muito obrigado por compartilhar seus conhecimentos

@andersonmendes4066 2 жыл бұрын

Muito obrigado pelos vídeos sobre flex-box!!!! Estou desenvolvendo um projeto em HTML / CSS e seus vídeos de têm me ajudado bastante. Obrigado mesmo Rafa!

@mininusequeci Жыл бұрын

Aprendi obrigado muito!

@vmdimoveiseinvestimentos7395 Жыл бұрын

Percebi que, o (order) me possibilita selecionar e destacar uma quantidade de posts desejados. Conteúdo top d+.

@tanque2222 Жыл бұрын

Esses jogos era tudo o que eu precisava agora, genial. Obrigado

@safyrasystem 2 жыл бұрын

Vídeos como esse são sensacionais, ensinamentos de forma clara e fácil são difíceis de encontrar. Parabéns pela explicação, excelente

@gabrielapaulinideutner3180 6 ай бұрын

Parabééééns Rafa!!! Você é maravilhosa! Explicou tão bem, é a melhor professora de CSS do KZfaq inteirinho

@caio4599 4 ай бұрын

muito obrigado pelo video, cada dia apendendo um pouquinho mais

@marcioneves8926 Жыл бұрын

Show de bola! Didática sensacional! Parábens Rafa!

@talita4559 4 ай бұрын

Que didática maravilhosa! Parabéns! ❤

@anadycarvalho4925 Жыл бұрын

Amando o seu canal, Rafaella!!! Muito didática. Só gratidão!!!

@Jonny0n_3335 3 ай бұрын

Shift + alt + A também torna as linhas em comentários e tbm pode usar essa combinação pra comentar em HTML , CSS ou JAVASCRIPT. Espero ter ajudado.

@vicentebruno2538 2 жыл бұрын

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

@felipegsilva1 Жыл бұрын

Didática muito boa, parabéns! Estou aprendendo a desenvolver em HTML e CSS e esse tipo de aprendizado vai me ajudar muito nos exercícios de prática. Por favor, faça sim um projeto com todos esses itens e nos ensine um pouco mais :D

@nelsonsoares2281 2 жыл бұрын

Sensacional Rafa, didática maravilhosa, muito obrigado!

@rafaellaballerini 2 жыл бұрын

fico feliz Nelson! muito obrigada 😊😊

@ceica2006 2 жыл бұрын

@@rafaellaballerini como faço pra criar um banco de dados? Pra sistema de login. Indica um vídeo por favor, obrigado! Ótima explicação!

@AnaCaroline-bm9ks 2 жыл бұрын

Ótima explicação! Super didática e carismática. Obrigada!

@KaioSilva-ft5hy Жыл бұрын

ééé perdemos uma Doutora e ganhamos uma Professora kakakaka.. parabéns msm pela didática...é muito boa no que faz.. gostei muito... acaba que sai fácil o aprendizado com vc. 🤜🤛

@lucasludtke3631 2 жыл бұрын

Que aula proveitosa e didática, obrigado pela sua dedicação.

@willianabe9664 Жыл бұрын

Bem didatico, tirou muitas duvidas que eu tinha!

@aviladamusica Жыл бұрын

Massa demais, sua didática ótima! Obrigado!

@renatonunesdemenezes Жыл бұрын

Você arrebeeeeeeeenta. parabéns pela aula

@luanacaldas6353 Жыл бұрын

Que conteúdo incrível e didática maravilhosa. Muito obrigada por essa aula, Rafa!

@CanalWebtechTV 9 ай бұрын

Você é muito show!! Parabéns.

@ERI22176 Жыл бұрын

Sua didática fica cada vez mais incrível Rafa, muito obrigado pela aula

@miriosps4539 2 жыл бұрын

nossa muito bom amei, tudo bem explicadinho, faz video um sobre o grid

@danielduarte6373 Жыл бұрын

ele explique de um jeito tão simples de entender

@gabrielrodel5178 2 жыл бұрын

opaa, conheci hoje, achei incrível o estilo dos seus vídeos, ótimas explicações. Deus te abençoe, sucesso!

@luizguivera 4 ай бұрын

Dica galera! Se você ir no inspecioanar e clicar no "conteiner pai" e styles, terá uns quadrados do lado display: flex; se clicar tera como modificar as propriedades: *flex-direction:* *flex-wrap:* *align-content:* *justify-content:* *align-items:*

@andersonleite766 Жыл бұрын

Linda! Obrigado pela aula.

@MarceloHenrique-mn8vf 2 жыл бұрын

muitíssimo útil, esse seu vídeo!

@diegospinola4960 Жыл бұрын

Ótimo conteúdo, parabéns!

@coffeehousemusicjazz 2 жыл бұрын

Eu quero.Obrigaduuu por tudo que vc nos ajudou ❤️❤️❤️❤️❤️❤️🙏🙏🙏

@vanessaballerini8572 2 жыл бұрын

Excelente vídeo, Rafa! Muito didático! 👏👏

@antoniofantoni7895 Жыл бұрын

Aulão, parabéns !

@armandoyamada225 2 жыл бұрын

Muito boa a aula, parabéns.

@edsonalves7153 2 жыл бұрын

Nossa muito boa explicação, estou aprendendo bastante vendo seus vídeos , sucesso para vc fica com Deus

@rafaellaballerini 2 жыл бұрын

fico muito feliz!!! obrigada 😊

@valberjunior2109 2 жыл бұрын

Os melhores vídeos !!!

@paulogoncalvesdemelofilho6176 2 жыл бұрын

Que Aulão!!!!!! Showw

@izaelgomes1457 2 жыл бұрын

Rafaela faz um vídeo nesse estilo sobre Grid

@dokajunior Жыл бұрын

Sempre vejo varios videos seus, muito boa a didatica.. ps: vc tá mt gata nesse video mds 🤣

@pablovieira9683 2 жыл бұрын

Muito bommm!! 👏🏻👏🏻👏🏻👏🏻

@mayconrocha8723 Жыл бұрын

Show demais.

@pamelacrzs 2 жыл бұрын

top demais 🧑‍💻🤓

@Guino106 2 жыл бұрын

Muito obrigado Rafa, seu canal é sensacional!!!!! Com sua excelente didatica, bem que poderia haver uma explicação de grid algum dia ein :)

@felipemaganha5961 2 жыл бұрын

Está linda rafa show de bola o vídeo

@LoboCharles 2 жыл бұрын

top :D

@danielvicentefagundes6774 2 жыл бұрын

Interessante !!! Parabéns !!!🐞🐞🎃🎃

@tikararaps133 2 жыл бұрын

Vídeo incrível❤️🥰

@gabrielcalu6879 2 жыл бұрын

Maravilhosa 😍

@gustavonery_ 2 жыл бұрын

Show 🤩🤩😁. Faz um vídeo de GRiD também

@tikararaps133 2 жыл бұрын

Sou fã seu Rafa 🥺

@jhonnsantos4359 Жыл бұрын

Tem que ter cuidado usando o Gap por causa da responsividade, vai ter que usar um media query

@BrunoHenrique-wq6qs 2 жыл бұрын

monstra

@gabrielsilvaferreira3823 2 жыл бұрын

Rafa vc n é o css, mais me deixa responsivo em qualquer lugar.

@helder-rangel 3 ай бұрын

😀

@Gostosolucas Жыл бұрын

dica (VScode): hoje o atalho não é mais ctrl + k + c ou ctrl + k + u, agora é apenas ctrl + o botão de dois pontos ( : ) ctrl + : tanto pra comentar quanto pra descomentar e isso funciona em todas as linguagens independente da forma que cada uma usa pra comentar

@joaojpnj 2 жыл бұрын

Rafaella, qual o curso no Alura vc é instrutora? Sua didática é incrível.

@rafaellaballerini 2 жыл бұрын

Eu sou da imersão dev! Na plataforma desenvolvi o projeto do curso de react também, mas não sou eu quem gravou as aulas, mas vale dar uma olhada que ta bem legal!

@RudneyLeal 2 жыл бұрын

Vi que no VS code tem o Display flexbox e o display flex, qual a diferença?

@ryanbarros3534 2 жыл бұрын

Pessoal, não tem muito a ver com o assunto, porém kkkkk O "!" do meu vscode não esta mais funcionando o atalho para o corpo do código, alguém sabe oq pode ser ?

@benmoraes5511 Жыл бұрын

10:04

@romulotorresmelo1583 2 жыл бұрын

qual camera você usa nos vídeos ?

@osninjabr 2 жыл бұрын

Ainda não consegui posicionar cada box do meu ! 😭

@dayanapassos2711 Жыл бұрын

Ao utilizar o flex-basis ele só muda o width, o heigth eu preciso definir de forma separa. Isso é normal? Isso tanto usando as propriedades de forma separa ou na juntas na flex.

@ericpaes3281 10 ай бұрын

Acho que depende do eixo que você ta trabalhando. Como o eixo principal é o row, ele vai modificar a linha. Se fosse em colunas, seria a altura

@_gabrielfratelli 2 жыл бұрын

" Ctrl ; " também comenta e descomenta o código.

@juniomachado4507 Жыл бұрын

Rafa qual o tema q vc usa no seu VsCode?? Achei ele mto foda :3

@rafaellaballerini Жыл бұрын

Eu uso o Ballerini Theme! 🖤

@juniomachado4507 Жыл бұрын

@@rafaellaballerini aaaaaa vlwwww s2

@leonardoalves7740 2 жыл бұрын

galera, fui hackeado e pelo que vi ficaram spamando la no server do discord. Ai fui banido e nao consigo entrar novamente, será que algum mod pode me adicionar novamente por favor?