Тёмный

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

Rafaella Ballerini
Подписаться 306 тыс.
Просмотров 51 тыс.
50% 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! 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/jobs/?...
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/pt/jobs
Código início do vídeo: github.com/rafaballerini/Flex...
Código final do vídeo: github.com/rafaballerini/Flex...
Guia Flexbox: css-tricks.com/snippets/css/a...
Palavras chave para usar com flex-basis: developer.mozilla.org/en-US/d...
Alguns joguinhos para treinar Flexbox a partir de agora:
flexboxfroggy.com/#pt-br
www.flexboxdefense.com/?...
mastery.games/flexboxzombies/...
Minhas redes sociais: beacons.ai/rafaballerini
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

Наука

Опубликовано:

 

13 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 108   
@antoniosergiosouzamenezes7235
@antoniosergiosouzamenezes7235 7 месяцев назад
Ensinar é um dom divino!! Parabéns, vc não tem ideia do quanto tem me ajudado!!
@Espiroqueta
@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
@henribalthazar 2 года назад
Front end sempre salvando vidas
@mvsuguino
@mvsuguino 2 года назад
Ctrl + ; (control + ponto-e-vírgula) também comenta/descomenta o código. Não precisa 2 atalhos diferentes.
@antoniofantoni7895
@antoniofantoni7895 Год назад
Também uso esse !
@gcbicca
@gcbicca Год назад
Shift + alt +a tbm comenta ou cria as tags de comentário!
@jairoprates4300
@jairoprates4300 Месяц назад
Muito mais prático, sempre utilizo esse
@BlankemburgCastanho
@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.
@rafoarte
@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
@_gabrielfratelli Год назад
É essencial aprender isso pessoal, utilizem sempre flexbox e flexgrid!!! Parabéns rafinha você é um máximo.
@andreforttuna
@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
@victorantonio6590 Год назад
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!
@oCarlos__
@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!
@rbiuri
@rbiuri Год назад
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
@LaysllaMatias Год назад
Você tem vaga na sua Startup? Sou dev jr e gostaria de uma oportunidade :)
@anadycarvalho4925
@anadycarvalho4925 Год назад
Amando o seu canal, Rafaella!!! Muito didática. Só gratidão!!!
@gabrielapaulinideutner3180
@gabrielapaulinideutner3180 4 месяца назад
Parabééééns Rafa!!! Você é maravilhosa! Explicou tão bem, é a melhor professora de CSS do RU-vid inteirinho
@felipemarques4197
@felipemarques4197 Год назад
Seus vídeos são sensacionais, está me ajudando demais na caminhada de dev. Faça mais vídeos por favor!
@denercoelho2592
@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!!!!!!
@mayconrocha8723
@mayconrocha8723 Год назад
Show demais.
@luanacaldas6353
@luanacaldas6353 Год назад
Que conteúdo incrível e didática maravilhosa. Muito obrigada por essa aula, Rafa!
@AnaCaroline-bm9ks
@AnaCaroline-bm9ks Год назад
Ótima explicação! Super didática e carismática. Obrigada!
@edvaldojunior1745
@edvaldojunior1745 Год назад
Simplesmente suas aulas são demais! A didática bem simples e direta.
@vanessaballerini8572
@vanessaballerini8572 2 года назад
Excelente vídeo, Rafa! Muito didático! 👏👏
@safyrasystem
@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
@lucasludtke3631
@lucasludtke3631 2 года назад
Que aula proveitosa e didática, obrigado pela sua dedicação.
@seunomeaqui_
@seunomeaqui_ Год назад
Aprendi obrigado muito!
@ERI22176
@ERI22176 Год назад
Sua didática fica cada vez mais incrível Rafa, muito obrigado pela aula
@igomaral
@igomaral Год назад
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
@andersonleite766
@andersonleite766 Год назад
Linda! Obrigado pela aula.
@caio4599
@caio4599 2 месяца назад
muito obrigado pelo video, cada dia apendendo um pouquinho mais
@paulogoncalvesdemelofilho6176
@paulogoncalvesdemelofilho6176 2 года назад
Que Aulão!!!!!! Showw
@andersonmendes4066
@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!
@MarceloHenrique-mn8vf
@MarceloHenrique-mn8vf Год назад
muitíssimo útil, esse seu vídeo!
@talita4559
@talita4559 2 месяца назад
Que didática maravilhosa! Parabéns! ❤
@antoniofantoni7895
@antoniofantoni7895 Год назад
Aulão, parabéns !
@rebecaoliveira4047
@rebecaoliveira4047 6 месяцев назад
Rafa tu explica muito bem, maravilhosa essa didática oh agora sim estou conseguindo aprender Flexbox. Obrigado mesmo.
@marcioneves8926
@marcioneves8926 10 месяцев назад
Show de bola! Didática sensacional! Parábens Rafa!
@valberjunior2109
@valberjunior2109 Год назад
Os melhores vídeos !!!
@vicentebruno2538
@vicentebruno2538 Год назад
Parabéns pelo vídeo, muito didático e completo
@pensando_positivo
@pensando_positivo 2 года назад
valeu Rafaella... comecei a gostar de front-end por causa de um video seu...muito obrigado por compartilhar seus conhecimentos
@diegospinola4960
@diegospinola4960 Год назад
Ótimo conteúdo, parabéns!
@CanalWebtechTV
@CanalWebtechTV 7 месяцев назад
Você é muito show!! Parabéns.
@coffeehousemusicjazz
@coffeehousemusicjazz Год назад
Eu quero.Obrigaduuu por tudo que vc nos ajudou ❤️❤️❤️❤️❤️❤️🙏🙏🙏
@aviladamusica
@aviladamusica Год назад
Massa demais, sua didática ótima! Obrigado!
@tanque2222
@tanque2222 Год назад
Esses jogos era tudo o que eu precisava agora, genial. Obrigado
@g3luka
@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.
@pablovieira9683
@pablovieira9683 2 года назад
Muito bommm!! 👏🏻👏🏻👏🏻👏🏻
@armandoyamada225
@armandoyamada225 Год назад
Muito boa a aula, parabéns.
@willianabe9664
@willianabe9664 Год назад
Bem didatico, tirou muitas duvidas que eu tinha!
@renatonunesdemenezes
@renatonunesdemenezes Год назад
Você arrebeeeeeeeenta. parabéns pela aula
@EllieVi
@EllieVi Год назад
comecei a aprender js, html e css e o primeiro vídeo sobre que vi foi seu e sério, já consegui pegar a parte da estruturação inicial de um site
@gabrielrodel5178
@gabrielrodel5178 Год назад
opaa, conheci hoje, achei incrível o estilo dos seus vídeos, ótimas explicações. Deus te abençoe, sucesso!
@jeremiasverissimogomes8521
@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
@gabrielcalu6879
@gabrielcalu6879 2 года назад
Maravilhosa 😍
@tikararaps133
@tikararaps133 2 года назад
Vídeo incrível❤️🥰
@vmdimoveiseinvestimentos7395
Percebi que, o (order) me possibilita selecionar e destacar uma quantidade de posts desejados. Conteúdo top d+.
@felipegsilva1
@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
@pamelacristina6097
@pamelacristina6097 2 года назад
top demais 🧑‍💻🤓
@KaioSilva-ft5hy
@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. 🤜🤛
@miriosps4539
@miriosps4539 Год назад
nossa muito bom amei, tudo bem explicadinho, faz video um sobre o grid
@4queijos90
@4queijos90 Год назад
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ê
@Guino106
@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
@felipemaganha5961 2 года назад
Está linda rafa show de bola o vídeo
@danielvicentefagundes6774
@danielvicentefagundes6774 Год назад
Interessante !!! Parabéns !!!🐞🐞🎃🎃
@Jonny0n_3335
@Jonny0n_3335 Месяц назад
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.
@danielduarte6373
@danielduarte6373 11 месяцев назад
ele explique de um jeito tão simples de entender
@tikararaps133
@tikararaps133 2 года назад
Sou fã seu Rafa 🥺
@nelsonsoares2281
@nelsonsoares2281 2 года назад
Sensacional Rafa, didática maravilhosa, muito obrigado!
@rafaellaballerini
@rafaellaballerini 2 года назад
fico feliz Nelson! muito obrigada 😊😊
@ceica2006
@ceica2006 Год назад
@@rafaellaballerini como faço pra criar um banco de dados? Pra sistema de login. Indica um vídeo por favor, obrigado! Ótima explicação!
@gustavonery_
@gustavonery_ 2 года назад
Show 🤩🤩😁. Faz um vídeo de GRiD também
@edsonalves7153
@edsonalves7153 2 года назад
Nossa muito boa explicação, estou aprendendo bastante vendo seus vídeos , sucesso para vc fica com Deus
@rafaellaballerini
@rafaellaballerini 2 года назад
fico muito feliz!!! obrigada 😊
@dokajunior
@dokajunior Год назад
Sempre vejo varios videos seus, muito boa a didatica.. ps: vc tá mt gata nesse video mds 🤣
@izaelgomes1457
@izaelgomes1457 Год назад
Rafaela faz um vídeo nesse estilo sobre Grid
@LoboCharles
@LoboCharles Год назад
top :D
@BrunoHenrique-wq6qs
@BrunoHenrique-wq6qs Год назад
monstra
@helder-rangel
@helder-rangel Месяц назад
😀
@Lynx_z
@Lynx_z 2 месяца назад
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:*
@jhonnsantos4359
@jhonnsantos4359 Год назад
Tem que ter cuidado usando o Gap por causa da responsividade, vai ter que usar um media query
@RudneyLeal
@RudneyLeal Год назад
Vi que no VS code tem o Display flexbox e o display flex, qual a diferença?
@romulotorresmelo1583
@romulotorresmelo1583 Год назад
qual camera você usa nos vídeos ?
@gabrielsilvaferreira3823
@gabrielsilvaferreira3823 Год назад
Rafa vc n é o css, mais me deixa responsivo em qualquer lugar.
@joaojpnj
@joaojpnj Год назад
Rafaella, qual o curso no Alura vc é instrutora? Sua didática é incrível.
@rafaellaballerini
@rafaellaballerini Год назад
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!
@ryanbarros3534
@ryanbarros3534 Год назад
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 ?
@Gostosolucas
@Gostosolucas 11 месяцев назад
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
@benmoraes5511
@benmoraes5511 Год назад
10:04
@leonardoalves7740
@leonardoalves7740 Год назад
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?
@juniomachado4507
@juniomachado4507 Год назад
Rafa qual o tema q vc usa no seu VsCode?? Achei ele mto foda :3
@rafaellaballerini
@rafaellaballerini Год назад
Eu uso o Ballerini Theme! 🖤
@juniomachado4507
@juniomachado4507 Год назад
@@rafaellaballerini aaaaaa vlwwww s2
@dayanapassos2711
@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
@ericpaes3281 8 месяцев назад
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
@osninjabr
@osninjabr Год назад
Ainda não consegui posicionar cada box do meu ! 😭
@_gabrielfratelli
@_gabrielfratelli Год назад
" Ctrl ; " também comenta e descomenta o código.
@thiagoalbuquerque5703
@thiagoalbuquerque5703 4 месяца назад
Shift + Alt + A comenta e descomenta o código.
@alexsantos8410
@alexsantos8410 Год назад
que mulher belíssima , me apaixonei kkkkk
@kevinanjos6519
@kevinanjos6519 2 года назад
CSS me dá medo kkkkkk
@lucasgraf9508
@lucasgraf9508 Год назад
Alguém sabe o instagram dela ?
@georgekolody7721
@georgekolody7721 Год назад
Parece que faz tanto tempo que assisti a primeira aula kkkk.. nessa vida de estudante se passa 10 anos em um mês… fora os cabelos brancos
@joaocuriosidades2331
@joaocuriosidades2331 Год назад
alguém conseguiu resolver o ultimo desafio do jogo do sapinho?
@newtoncesargarcia9254
@newtoncesargarcia9254 2 года назад
vou ver o video de novo nn prestei mt atenção
@rafaellaballerini
@rafaellaballerini 2 года назад
bons estudos!
@dev-devvek1ng413
@dev-devvek1ng413 4 месяца назад
;-;
@andreyamamoto1709
@andreyamamoto1709 Год назад
Ela é tao linda q tenho q ver o video 2x pra prestar atenção.
@gabrielalmeida647
@gabrielalmeida647 2 года назад
Ontem mesmo eu tava fazendo um exercício sobre isso e tu me posta esse vídeo! Hahaha
Далее
O QUE É CSS? (SELETORES, PROPRIEDADES E VALORES)
10:06
OS TIPOS DE DISPLAY DOS ELEMENTOS - HTML E CSS
12:13
Просмотров 16 тыс.
HTML E CSS PARA INICIANTES | TUTORIAL COMPLETO
2:00:07
Просмотров 39 тыс.
Use AÇÕES para criar mais rápido⚡
7:33
ПЕРЕХОЖУ НА НОВЫЙ ТЕЛЕФОН!
10:34
НАШ ЛЮБИМЫЙ КЛИЕНТ
1:00
Просмотров 471 тыс.
TOP-18 ФИШЕК iOS 18
17:09
Просмотров 598 тыс.