Aprenda a trabalhar com FlexBox • HTML5/CSS3
Вставка
- Опубліковано 21 жов 2024
- Flexbox é uma propriedade do css3 (cascading style sheet) que ajuda no alinhamento progressivo e dinâmico
dos elementos da nossa página web para os mais diversificados tamanho de tela. A propriedade organiza os elementos
de forma modularizada sem a necessidade de utilizar floats, tables, inline-blocks ou qualquer outro tipo de alinhamento
que comprometa de alguma forma na experiência dos elementos da página e na fluidez do layout.
Alguns benefícios:
fácil de manter e de posicionar elementos
altamente personalizável e fluido
suporte cross-browser (95%)
Assuntos abordados no vídeo: content, items, display-flex, flex-directions, flex-wrap, justify-content, align-items,
align-content, flow, order, flex-grow, flex-shrink, flex-basis e etc.
// LINKS IMPORTANTES:
Autoprefixer (other browsers)- goo.gl/Ouy5Mk
Flexbox Playground (flex-box constructor) - goo.gl/c8FwCa
Polyfill (flex-box) - goo.gl/bkqwQP
W3C documentação oficial flex-box - goo.gl/JksFFw
// INSCREVA-SE NO CANAL
adf.ly/1XvuRS
// REDES SOCIAIS
1. Twitter: adf.ly/1XvuFL
2. Facebook: adf.ly/1XvuIl
3. Google+: adf.ly/1XvuLW
Poxa, gostei muito da sua didática.
vc conseguiu simplificar, deu o conceito e a aplicabilidade, era o que eu precisava para compreender.
Valeu!!!
Você não sabe o quanto salvou o meu dia... Procurei um bom tempo por um conteúdo assim e consegui encontrar aqui tudo que precisava para entender o FlexBox. Muito obrigado!
Excelentíssimo vídeo!
Conteúdo top!
Show!!!
Melhor aula que vi sobre flexbox
Muito bom, sem enrolação direto ao ponto.
Você explica muito bem! adorei o vídeo, agregou muito aos meus conhecimentos e sanou muitas duvidas que eu ainda tinha mesmo revendo aulas sobre o assunto. Obrigado por explicar tão bem!!!!
Parabéns adorei essa aula acima da média.
"Véi" do céu! Isto me ajudou muito no meu trabalho! Eu tinha que criar um formulário complexo, totalmente diferente do que estamos acostumados a ver/fazer! Os primeiros quatro minutos do vídeo foram suficientes para clarear a minha mente no que realmente precisava fazer! Muito obrigado guri!
Muito Bom Leonardo. Isso aê pedi lá no grupo e tu foi lá e fez. Parabéns e agora sim aprendi demais sobre flex-box.
Depois de muitos anos decidi voltar a estudar front-end e este vídeo ajudou muito! Não conhecia essa propriedade flex.
Parabéns pelo Vídeo!
Parabéns cara, Video sensacional.
Uma das melhores aulas que eu achei até agora, eu sou iniciante, e o float é uma coisa bem chata de se mexer, isso vai facilitar mto. Vlw.
ótima aula, parabéns.
Muito bom, eu já havia escutado sobre essa propriedade, mas só haviam tutoriais de péssima qualidade no youtube ou de gringos, por isso não procurei mais a fundo, mas dai você ensinou essas propriedades e o tutorial ficou perfeito, de fácil entendimento e bem direto ao assunto, estou ansioso para aprender a trabalhar com grids e com essa propriedade...
Parabéns pela ótima didática de ensino, ótima desenvoltura nos códigos, semântica e também no conhecimento...
Muito bomm!
Continue nessa pegada amigo
Você não tem noção do quando me esclareceu!! Muito obrigado pelo vídeo! Que continue dissipando conhecimento. Abraço!
Muito boa sua forma de explicação!
depois de quase um ano apanhando, eu acho um vídeo q realmente me ensinou e tirou todas as dúvidas
parabéns!!
Muito Bom, didática fantástica.
Muito bom! Só uma pequena correção: o valor correto para flex-wrap sem quebra seria nowrap, e não no-wrap como mostrado no vídeo... Parabéns pela iniciativa! ;D
Aula objetiva sem enrolação e completa, parabens ajudou muito!
Só um adendo.
Justify-content aceita center.
E é muito útil
Aguardando o Flexbox com Grid!
muito didático, obrigada
Baita explicação ...Parabéns !!!!!
Muito boa aula, valeu!
muito obrigado, man tava quebrando a cabeça, vc me ajudou muito valeu msm man
Aula rápida e direta, excelente.
Oi Leonardo, ótima aula!! Ganhou meu jóinha e meus aplausos! =D
me ajudo bastante mano, valeu +1 inscrito
Top demais ! Parabéns
Bem explicado amigo, foi simples e direto.
Uma idéia , talvez você poderia criar um vídeo mostrando como usar os mixins do Bootstrap 4.1 para aplicar os estilos dele a nossas classes personalizadas.
Muito boa a aula
já virei seu fã =], vlw pela aula
Muito Interessante, já tinha ouvido falar mas não conhecia na prática é muito legal, gostei bastante de ver em ação. Parabéns e Sucesso
Aula muito boa, parabéns e obrigado!
Aula top velho, parabéns!
Excelente vídeo, ótima didática ajudou muito.
Parabéns cara ... sua explicação é muito clara!
Parabéns pelas dicas. Me ajudou muito foi bem explicativo. Muito obrigado!
Melhor vídeo do universo
Cara muito top parabéns pelos vídeos, grandes aprendizados.
Muito bom Ferreira! Simplesmente demais!!! Aprendo muito com você! Tenho uma meta, na qual você me dedicar a aprender: "O mundo da Web"! Valeu!!!
Vídeo Muito bom!
EXCELENTE PROFESSOR, Parabéns !!!
conteúdo muito bom!
obrigado por postar... grande aula]
Ótimo vídeo!
Esse vídeo foi de grande ajuda!
Ótimo vídeo, só senti falta de redimensionar a janela para vermos o comportamento dos articles em cada situação mostrada, principalmente diminuindo a tela até os elementos se juntarem para vermos se vão se realinhar, se vão ficar em linha ou embaixo do outro etc. Mas é um vídeo de grande valia e ótimo conteúdo.
Parabéns. Seus vídeos são ótimos.
Eu posso usar o align-items mesmo que a direção do display flex esteja apontado como row? Ou seja não precisando usar display: Column para alinhar verticalmente?
Do mesmo modo posso usar o justify-content em um layout de column, flex-direction:column?
Muito boa sua explicação, obrigado! Me ajudou muito.
Aí sim...mto bom... ajudou d+... parabéns!
EXCELENTE VIDEO
te amo cara ! salvou muito !
Fala Leonardo tudo bom?
Primeiro eu quero te agradecer e parabenizar, teus videos são geniais ja aprendi muito com eles um melhor que o outro.
Estou estudando desenvolvimento web e me dou bem com o back-end, mas o que estou a fim de aprender mesmo é front-end. Eu gostaria de saber onde você aprendeu tudo isso, com livros, curso, sozinho e se voce recomenda algum livro ou site pra estudar
Vlw cara
Perfeito! Obrigada.
Uma das primeiras coisas que aprendi no livro CSS3 do "Mauricio Samy Silva" foi que no CSS não existem atributos, há somente elementos definidos como "seletores", "propriedades" e "valores". Segundo ele, o termo "atributo" é vago dentro do CSS onde não existe nem mesmo dentro de expressões.
Bem legal o conteúdo sobre Flexbox, muito interessante. Parabéns.
Gostaria de fazer um pedido. Seria possível fazer um vídeo sobre criação de slider responsivo feito somente com css? Slider do tipo imagem de fundo, texto e botão, setas sobre a imagem. Seria muito legal ter um bom vídeo em português sobre o assunto.
Simplesmente incrível! Por gentileza, você tem aula de como usar o Grid layout e flex box juntos?
Vai em um video do Origamid ele da varios exemplos. Mas voce usa conforme sua necessidade, interaçao entre linha (flex) interaçao entre linha e coluna (grid)
ok obrigado!
Ainda tem 4 miseráveis que tem coragem de dar dislike kkkk muito boa a aula obrigado
Muito bom o vídeo, esclareceu muito mesmo, valeu!
Faz vídeo sobre Grid Layout também!
Maravilhoso.
Veja se consegue disponibilizar os códigos para download também, ajuda quem está começando....
a nível de estudo, meus parabéns mesmo....
muito bom cara.
cara...
Sensacional!!!
vc explica muito bem, acabei de fazer o curso de flexbox mas ainda estava com muuuuito dúvida pq tenho dificuldade para memorizar (não é nem culpa do professor)as o teu jeito abriu minha mente, ainda tenho algumas dúvidas. vc deve ser um homem muito ocupado, se não eu te enviaria um layout só pra tu avaliar como eu faria pra usar o flex em uma seção que estou com problemas.
mas vc tá de parabéns!
Que bom que te ajudei, Samuel! Nós temos um grupo no Facebook que a galera usa para compartilhar projetos, trocar ideias e tirar dúvidas, se quiser compartilhar o seu projeto lá, só solicitar pra entrar! facebook.com/groups/botecodosferreiras/?fref=ts
Grande abraço!
Postei minha dúvida com um arquivo.html no grupo, estou esperando a um tempinho rs..
Abraço!
Fala Samuel. A correria está brava, estou finalizando alguns projetos, mas vou dar uma olhada ainda essa semana. Abraços ;)
Segue o link da minha dúvida.
Abraço!
facebook.com/groups/botecodosferreiras/668980819954186/
aula sensacional, sem mais.
Share for us! :)
Oque eu pude notar é que não há nada de novo, apenas uma maneira diferente de fazer oque já era possível antes... Ótimo video, parabéns!
fora da exemplificação, o "id"=content é o mais correto, ou se pode passar a class mesmo?
Excelente. Sugiro apenas colocar o exemplo usado em um arquivo para download.
Qual a forma correta de declarar prefixos com o flexbox... Ví formas diferentes... Obrigado.
Poderia criar um vídeo mostrando como fazer com que uma tela aberta num motog1, iphone4,5 .. seja aberta de uma forma, e nos outros de outra forma ?
Seria interessante se trouxer um conteúdo sobre Grid layout CSS é bem interessante os navegadores já estão aceitando, mas tem pouco conteúdo em português.
Algum problema se eu tiver um elemento Flex e precisar seta-lo com position absolute ou relative para posicionar um filho específico???
Você utiliza algum tema no google chrome?
Top! Esse polyfill suporta todas as propriedades do flex-box como justify-content, flex-wrap, flex-direction ?
Paulo, basicamente sim! Nunca tive problemas utilizando ele, dá uma olhada no doc do github. :)
Acabei de usar e fazer os teste tudo rolou! Vlw graça ao seu video agora vou atender "flexbox" nos ie antigão!
inscrito.
Pq não estou conseguindo fazer aqui com que os meus elemento filhos se adequem ao elemento pai , como vc descreveu no video no 03:30.......no meu ele ultrapassa minha div pai.....ja tentei de tudo quanto é jeito e nao foi...pode me ajudar? Eles não estao se adaptando ao tamanho do pai...... codepen.io/ErikGMatos/pen/yzGVzQ
deixa o link dos bagulhos, o programa é baixado? vlw
o sublimet test nao esta aceitando oflexbox socorrorr
Top top top
Ótimo!
Top
Ainda prefiro float e marge, simples e objetivos
Vai perder mais tempo fazendo cálculos das margins e padding
Top!
Só sucesso @GuilhermeLessa! :)
Pra mim não funcionou. Por que será?
.item:nth-clild(1){
order: 4;
}
.item:nth-clild(2){
order: 3;
}
.item:nth-clild(3){
order: 1;
}
.item:nth-clild(4){
order:2;
}
E aí Claudio. No seu código tem um pequeno erro. A palavra certa seria 'child' e não clild. Abç
@@felipetomaz1126 estou cego mesmo, rs rs rs. obrigado amigo.
@@claudiozabatonov6430 Acontece rsrs! Por nada parceiro.
Super apostila de flexbox www.dropbox.com/s/ilz2eqi0h60kn6c/Apostila_de_flexbox.pdf?dl=0
Obs: Order começa do 0 - então o primeiro elemento é 0 e não 1 ! No Exemplo ficaria 0 até 3 e não de 1 a 4!
Alguém me explica como as caixas mudaram de comprimento quando o vídeo está em 2:45 ?
Flex-direction: row;
quando eu quero alinhar um elemento no centro da row eu uso margin:0 auto; sem misterio
"COMO CRIAR SEU PRÓPRIO SITE INCRÍVEL? COM O WIX, VOCÊ POD..." NÃO PORRA, FAZ UMA FACULDADE, SE QUALIFICA, APRENDE A FAZER CÓDIGO NA UNHA, PQP!!!!!!
bootstrap o caraio kskssks
Meu deus cara, o cara tava só brincando -'
Pior quando alguém pede um projeto e não te procura mais quando do nada vc o site num anuncio e o cabeçalho do WIX
@@adryelgiovaniny3223 bootstrap e bom mano, ou vc ta so de zoas ?
Kkkkkkk o programador já mandou aquela resposta violenta.
porra vei..esses anuncio do wix é muito chato!...
Ótimo vídeo!