CSS Flexbox - Tudo o que você precisa saber

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ก.ค. 2022
  • Você tem dúvidas sobre qualquer parte do CSS Flexbox? Dúvidas no Eixo principal, eixo transversal, alinhamento, responsividade, entre outras? Depois desse vídeo, te garanto que você vai usar o Flexbox com muito mais confiança. Nada de ficar chutando align-items e justify-content aleatoriamente até acertar.
    Bora aprender?
    Cursos de Python e JavaScript / TypeScript com desconto:
    www.otaviomiranda.com.br/2017...
    Twitter: / otaviomirandabr
    #css #flexbox #html
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 72

  • @navegandoemc0d1gos
    @navegandoemc0d1gos ปีที่แล้ว +33

    50:40 É desse jeito que gosto, conteúdo profundo!
    Aproveitei para listas o tempo de da tópico da aula:
    0:00 - Introdução
    0:30 - O que é flexbox?
    1:36 - Criando o HTML
    3:40 - Estilizando o CSS
    5:00 - display: flex;
    6:40 - flex-direction: row;
    10:30 - justify-content
    14:50 - flex-direction: row-reverse;
    15:59 - flex-direction: column;
    18:39 - gap
    20:19 - align-items
    25:54 - flex-wrap
    28:00 - flex-flow
    28:55 - align-content
    31:38 - order
    36:10 - flex-grow
    39:14 - flex-shrink
    41:45 - flex-basis
    44:00 - Shorthand flex
    45:32 - align-self
    46:49 - centralizar um elemento usando o flex
    48:23 - Tornar um flex-item em flex

    • @dinodrivesclub4282
      @dinodrivesclub4282 7 หลายเดือนก่อน

      Obrigado, nem todo herói usa capa heim!

  • @queirozm.santana9908
    @queirozm.santana9908 2 ปีที่แล้ว +13

    grato pela aula prof. Queiroz de Angola, em breve serei seu aluno de react, tou lutando pra conseguir uma grana

    •  2 ปีที่แล้ว +5

      Manda um e-mail pra mim falando isso (meus contatos estão no perfil do YT).

  • @guimaraesflavio
    @guimaraesflavio 9 หลายเดือนก่อน +1

    Você precisava criar um curso de como dar cursos!!!
    Parabéns pela didática, primeiro vídeo sobre flex box que realmente explica o comportamento e não fica só descrevendo funções!

  • @diegoredeti
    @diegoredeti 2 หลายเดือนก่อน

    Obrigado pela excelente explicação professor, eu estava com dificuldade em compreender esses conceitos.

  • @ricardoferreira3252
    @ricardoferreira3252 ปีที่แล้ว +2

    Aula excelente, sem dúvida umas das melhores que tem aqui no YT !!!

  • @renandeoliveira751
    @renandeoliveira751 ปีที่แล้ว

    Conteúdo sempre top! Um dos melhores! professores!

  • @wevertonsilva6305
    @wevertonsilva6305 2 ปีที่แล้ว +2

    Muito bom, sempre com uma ótima didática!
    parabéns, e obrigado pelo conteúdo.

  • @DeVictor2002
    @DeVictor2002 2 หลายเดือนก่อน

    Voltando aqui pra agradecer , só com essa aula consegui dominar de verdade o display flex , ótima didática !

  • @app2028
    @app2028 ปีที่แล้ว +1

    Muito boa guerreiro, já comprei vários cursos seu sempre com uma qualidade absurda super incrível!🎉

  • @leandropastena9500
    @leandropastena9500 ปีที่แล้ว

    Excelente explicação! Obggg

  • @dinodrivesclub4282
    @dinodrivesclub4282 7 หลายเดือนก่อน

    Sensacional!!!

  • @dinodrivesclub4282
    @dinodrivesclub4282 7 หลายเดือนก่อน

    parabéns pelo conteúdo

  • @BKXA
    @BKXA ปีที่แล้ว

    Que aula excelente!

  • @erike4528
    @erike4528 11 หลายเดือนก่อน

    Cara... que aula sensacional, esclareceu muita coisa. Valeu mestre Otavio!

  • @Matheus.Stopinski
    @Matheus.Stopinski ปีที่แล้ว

    Vc é demais amigo. Gostei da aula!!!!

  • @alanrodriguesprimo6888
    @alanrodriguesprimo6888 ปีที่แล้ว

    Chegou a luz que eu precisava kkkk, obrigado cara você é fera !

  • @flavianofreire479
    @flavianofreire479 ปีที่แล้ว +1

    mano, que isso, segundo video qu vejo seu, to parando no meio do video pra dizer que vc explica muito bem, isso tava dando m nó na minha cabeça kkkkkk ajudou muito. valeu

  • @raymond16917
    @raymond16917 ปีที่แล้ว

    Top de mais de mais de mais muito obrigado.

  • @junior1992a
    @junior1992a ปีที่แล้ว

    gostei muito da didática. Parabéns!!!

  • @hgkiller84games57
    @hgkiller84games57 ปีที่แล้ว

    Top Top de mais valeu man, estava a algum tempo atrás de uma explicação assim, simples e direta, ganhou um inscrito.😅😅😅😅

  • @wanielle_
    @wanielle_ 10 หลายเดือนก่อน

    Pela primeira vez vi minha vida toda sendo resolvida nos primeiros 10 minutos de vídeo! Gratidão! Conteúdo incrível, 50 minutos de puro aprendizado!

  • @davidmariosa8463
    @davidmariosa8463 4 หลายเดือนก่อน

    MEUS AMIGOS QUE AULA!

  • @fernandoi.kobayashi9826
    @fernandoi.kobayashi9826 ปีที่แล้ว

    Obrigado pela aula, bem didático. Muitas coisas que eram nebulosas para mim foram sanadas.

  • @FranciBahamult
    @FranciBahamult 5 หลายเดือนก่อน

    +1 inscrito!
    Aula show!

  • @felipequeiroz9093
    @felipequeiroz9093 2 ปีที่แล้ว +4

    Olá professor sou seu aluno de javascript e typescript, sou grato pelas aulas aqui do youtube e da udemy, muito conteúdo de qualidade!

    •  2 ปีที่แล้ว +1

      Que massa, muito obrigado

  • @cicerofernandes9796
    @cicerofernandes9796 2 ปีที่แล้ว

    Muito bom, ainda compro todos seus cursos da udemy, já estou na caminhada

  • @Mania_de_Gato
    @Mania_de_Gato 10 หลายเดือนก่อน

    Vc eh MT fera Otávio! Seu curso da Udemy eh bom demais 😍

  • @viniciusaraujo718
    @viniciusaraujo718 ปีที่แล้ว

    Obrigado por essa video aula sobre display flex! Aprendi muito sobre como usar essa propriedade para organizar elementos HTML de maneira mais eficiente e flexível. Fiquei surpreso com a quantidade de opções e recursos disponíveis para trabalhar com o flexbox e como eles podem ser facilmente aplicados em projetos web. Agradeço pela clareza e paciência ao explicar cada conceito e exemplo. Estou ansioso para colocar em prática o que aprendi e continuar aprendendo mais sobre essa poderosa ferramenta de design web. Muito obrigado! Comprei um dos seus cursos na Udemy.

  • @tiagof5623
    @tiagof5623 ปีที่แล้ว

    Assisti um aula de mais de 2h em outro canal e sai meio perdido. Não foi ruim de tudo, mas com essa aula, só os primeiros 20 min. foram mais q suficientes para entender. Essa do eixo principal e transversal foi demais! Os detalhes q fazem a gente pensar como as coisas funcionam. Agora, não tem como esquecer. Valeu!

  • @eletrotech51
    @eletrotech51 5 หลายเดือนก่อน

    Muito bom

  • @85dansurf
    @85dansurf ปีที่แล้ว

    Muito obrigado, por esse resumo, já sabia digamos 50% do flexbox, depois desse vídeo cheguei a 99%, o outros 1%, será fazendo na prática .

  • @rjunior_go
    @rjunior_go ปีที่แล้ว

    Muito bom 👏

    •  ปีที่แล้ว

      Obrigado 👍

  • @natanrelva
    @natanrelva 2 ปีที่แล้ว +2

    Nossa,você não sabe o tanto que carinho que tenho por você mestre. Até hoje me ajudando, sucesso amigo .

    •  2 ปีที่แล้ว

      Ahh obrigado 🙏

  • @marcelocguilherme
    @marcelocguilherme 2 ปีที่แล้ว

    Excelente conteúdo!

    •  2 ปีที่แล้ว

      Valeu 🙏

  • @NayT0N
    @NayT0N 2 ปีที่แล้ว +2

    Valeu mestre😀. Excelente aula. Sugestão: Colocar na descrição do vídeo o link da playlist em que esse vídeo está.

    •  2 ปีที่แล้ว +1

      Show, valeu

  • @JeanOmeg
    @JeanOmeg ปีที่แล้ว +1

    Sou aluno do curso de javascript e python lá da udemy, vc eh o melhor professor, parabéns e muito obrigado mestre 😁

    •  ปีที่แล้ว

      Obrigado, de coração 🥰

  • @eduSombeR
    @eduSombeR 2 ปีที่แล้ว

    Achei aqui, gostei comprei na Udemy seus cursos. Ótima didatica!

    •  2 ปีที่แล้ว +1

      Obrigado 🙏

  • @lucianoferreira8620
    @lucianoferreira8620 ปีที่แล้ว

    Valeu!

    •  11 หลายเดือนก่อน

      Desculpa a demora, eu realmente não tinha visto seu comentário. Agradeço demais =)

  • @Clebsonalves
    @Clebsonalves ปีที่แล้ว +1

    Flexbox é vida, e o grid tbm👍😂

  • @gigachad9110
    @gigachad9110 2 ปีที่แล้ว +1

    Professor faz um video explicando melhor o dot env

  • @oyasumigabriel
    @oyasumigabriel 2 ปีที่แล้ว +1

    Dica para entender sobre eixos, estude um pouco de matemática cartesiana.
    "Main Axis" é o eixo X, "Cross Axis" é o eixo Y.
    só uma sugestão, funcionou pra mim :)

    •  2 ปีที่แล้ว

      Boa

  • @hendcode
    @hendcode 2 ปีที่แล้ว +1

    Adoro o seu conteudo professor.
    Sou seu aluno na Udemy e curto muito o conteúdo. Se puder faz um video desse porém de GRID

    •  2 ปีที่แล้ว +1

      Podexa

  • @pablocardellino6547
    @pablocardellino6547 2 ปีที่แล้ว +1

    Muito bom este vídeo, esclareceu bastante o uso de flex. Você tem um deste mesmo tipo para grid? Não achei no teu canal.

    •  2 ปีที่แล้ว +1

      Ainda não tem, mas estou providenciando

  • @helder-rangel
    @helder-rangel 3 หลายเดือนก่อน

    😃

  • @GuilhermeDavino
    @GuilhermeDavino 2 ปีที่แล้ว +1

    Professor, seu curso de react e next.js é uma versão aprofundada do curso javascript, assim como o de Django é uma versão aprofundada da sessão Django no curso de python?

    •  2 ปีที่แล้ว +1

      Exatamente...

  • @henriqueteixeiradev4751
    @henriqueteixeiradev4751 ปีที่แล้ว

    Muito Boa Tarde Otávio...
    Quando poder lança uma vídeo aula fazendo um design responsivo utilizando o mínimo de design adaptativo e mais design responsivo, se é que você me entende.
    Ex: Com o mínimo de media query e break points possível deixa tudo no automático, quebra de linha e etc

    • @henriqueteixeiradev4751
      @henriqueteixeiradev4751 ปีที่แล้ว

      Sei que tem um monte de vídeo aulas fazendo, más com você ensinando eu entendo muito mais e sempre tem as sacadinhas que você passa

    •  ปีที่แล้ว +1

      @@henriqueteixeiradev4751 eu acho que já vamos ter... Acompanha aí esse curso de HTML, que nele devemos ter algo similar a isso.

    • @henriqueteixeiradev4751
      @henriqueteixeiradev4751 ปีที่แล้ว

      @ opa legal

  • @ReinaldoAdrianoBH
    @ReinaldoAdrianoBH 2 ปีที่แล้ว

    Com o Flexbox o float ficou depreciado ou ainda tem casos em que pode ser usado?

    •  2 ปีที่แล้ว

      É raro eu usar, mas você pode colocar uma imagem em volta de um texto com float.

  • @JoaoPedro-hx9ls
    @JoaoPedro-hx9ls ปีที่แล้ว

    O que aconteceu nesse momento? 3:09

  • @0zero030
    @0zero030 ปีที่แล้ว

    eu tenho pai com display flex e um Filho e dentro do filho tenho outro eu quero mover o Filho dentro do filho como eu faria

  • @ayredantara6838
    @ayredantara6838 2 ปีที่แล้ว

    Desculpa eu te perguntar, como você fez para emagrecer? Obrigada, tá muito esbelto =D

    •  2 ปีที่แล้ว +1

      Sem problema, acho que vou criar um canal sobre isso. Mas em resumo, dieta e musculação.

    • @ayredantara6838
      @ayredantara6838 2 ปีที่แล้ว

      @ Nossa que show, também estou nessa empreitada. Bjo. Obrigada por responder

  • @tutoriaisweb313
    @tutoriaisweb313 ปีที่แล้ว

    só nao dou dois joinhas por que nao da

  • @DanielGomes-qf4yq
    @DanielGomes-qf4yq ปีที่แล้ว

    Pra quem quer treinar um pouco esses comandos do flexbox, pesquisem "Flexbox Froggy", vai ajudar muito em fixar o conteúdo