FLEXBOX CSS! Como posicionar elementos na página web - parte 2
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
Ctrl + ; (control + ponto-e-vírgula) também comenta/descomenta o código. Não precisa 2 atalhos diferentes.
Também uso esse !
Shift + alt +a tbm comenta ou cria as tags de comentário!
Muito mais prático, sempre utilizo esse
Ensinar é um dom divino!! Parabéns, vc não tem ideia do quanto tem me ajudado!!
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!!
Front end sempre salvando vidas
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.
Amando o seu canal, Rafaella!!! Muito didática. Só gratidão!!!
Simplesmente suas aulas são demais! A didática bem simples e direta.
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 :)
Que aula proveitosa e didática, obrigado pela sua dedicação.
Ótima explicação! Super didática e carismática. Obrigada!
É essencial aprender isso pessoal, utilizem sempre flexbox e flexgrid!!! Parabéns rafinha você é um máximo.
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.
muito obrigado pelo video, cada dia apendendo um pouquinho mais
Seus vídeos são sensacionais, está me ajudando demais na caminhada de dev. Faça mais vídeos por favor!
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
Que conteúdo incrível e didática maravilhosa. Muito obrigada por essa aula, Rafa!
Me inscrever nesse canal e no da Code By Duda foi a melhor coisa que fiz nesse ano, vocês me ajudam DEMAIS!!!!!!
Massa demais, sua didática ótima! Obrigado!
Esses jogos era tudo o que eu precisava agora, genial. Obrigado
Parabéns pelo vídeo, muito didático e completo
muitíssimo útil, esse seu vídeo!
Você é muito show!! Parabéns.
Linda! Obrigado pela aula.
valeu Rafaella... comecei a gostar de front-end por causa de um video seu...muito obrigado por compartilhar seus conhecimentos
Show de bola! Didática sensacional! Parábens Rafa!
Que Aulão!!!!!! Showw
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!
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!
Rafa tu explica muito bem, maravilhosa essa didática oh agora sim estou conseguindo aprender Flexbox. Obrigado mesmo.
Sua didática fica cada vez mais incrível Rafa, muito obrigado pela aula
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
Que didática maravilhosa! Parabéns! ❤
Muito bommm!! 👏🏻👏🏻👏🏻👏🏻
Excelente vídeo, Rafa! Muito didático! 👏👏
Aulão, parabéns !
Aprendi obrigado muito!
Os melhores vídeos !!!
Percebi que, o (order) me possibilita selecionar e destacar uma quantidade de posts desejados. Conteúdo top d+.
Show demais.
Vídeo incrível❤️🥰
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!
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
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
Você arrebeeeeeeeenta. parabéns pela aula
Eu quero.Obrigaduuu por tudo que vc nos ajudou ❤️❤️❤️❤️❤️❤️🙏🙏🙏
Bem didatico, tirou muitas duvidas que eu tinha!
Ótimo conteúdo, parabéns!
Muito boa a aula, parabéns.
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! 👏🏾👏🏾
Você tem vaga na sua Startup? Sou dev jr e gostaria de uma oportunidade :)
ééé 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. 🤜🤛
Maravilhosa 😍
opaa, conheci hoje, achei incrível o estilo dos seus vídeos, ótimas explicações. Deus te abençoe, sucesso!
Parabééééns Rafa!!! Você é maravilhosa! Explicou tão bem, é a melhor professora de CSS do TH-cam inteirinho
nossa muito bom amei, tudo bem explicadinho, faz video um sobre o grid
top demais 🧑💻🤓
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.
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ê
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.
Muito obrigado Rafa, seu canal é sensacional!!!!! Com sua excelente didatica, bem que poderia haver uma explicação de grid algum dia ein :)
Está linda rafa show de bola o vídeo
Interessante !!! Parabéns !!!🐞🐞🎃🎃
Sou fã seu Rafa 🥺
ele explique de um jeito tão simples de entender
top :D
Nossa muito boa explicação, estou aprendendo bastante vendo seus vídeos , sucesso para vc fica com Deus
fico muito feliz!!! obrigada 😊
Show 🤩🤩😁. Faz um vídeo de GRiD também
Rafaela faz um vídeo nesse estilo sobre Grid
Sempre vejo varios videos seus, muito boa a didatica..
ps: vc tá mt gata nesse video mds 🤣
Sensacional Rafa, didática maravilhosa, muito obrigado!
fico feliz Nelson! muito obrigada 😊😊
@@rafaellaballerini como faço pra criar um banco de dados? Pra sistema de login.
Indica um vídeo por favor, obrigado!
Ótima explicação!
monstra
😀
Tem que ter cuidado usando o Gap por causa da responsividade, vai ter que usar um media query
Rafa vc n é o css, mais me deixa responsivo em qualquer lugar.
Vi que no VS code tem o Display flexbox e o display flex, qual a diferença?
qual camera você usa nos vídeos ?
Rafaella, qual o curso no Alura vc é instrutora? Sua didática é incrível.
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!
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 ?
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:*
10:04
Ainda não consegui posicionar cada box do meu ! 😭
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
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?
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.
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
Rafa qual o tema q vc usa no seu VsCode?? Achei ele mto foda :3
Eu uso o Ballerini Theme! 🖤
@@rafaellaballerini aaaaaa vlwwww s2
" Ctrl ; " também comenta e descomenta o código.
que mulher belíssima , me apaixonei kkkkk
CSS me dá medo kkkkkk
Shift + Alt + A comenta e descomenta o código.
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
Alguém sabe o instagram dela ?
alguém conseguiu resolver o ultimo desafio do jogo do sapinho?
vou ver o video de novo nn prestei mt atenção
bons estudos!
;-;
Ela é tao linda q tenho q ver o video 2x pra prestar atenção.
Ontem mesmo eu tava fazendo um exercício sobre isso e tu me posta esse vídeo! Hahaha