Aprenda Flexbox em 10 Minutos | Tutorial de HTML & CSS

Поделиться
HTML-код
  • Опубликовано: 8 янв 2025

Комментарии • 142

  • @DankiCode
    @DankiCode  4 года назад +9

    Consultoria grátis:
    instagram.com/guigrillo13

    • @pedroshelbyy
      @pedroshelbyy 4 года назад

      Opa

    • @joynan11
      @joynan11 3 года назад +1

      qual é esse tema que vc está usando no vs code? gostei demais dele, quero instalar no meu.

  • @eullerl4768
    @eullerl4768 2 года назад +46

    pqp kkkkkkk achei que o Peter que iria ensinar, até tomei um susto 😂😂

    • @Gabryel-g2i
      @Gabryel-g2i 4 месяца назад +1

      eu ja pensei: -não é que o cara sabe de tudo mesmo kkkkkkkkkkk

    • @Ivgotyx
      @Ivgotyx 3 месяца назад

      MDS SIM, ENGANARAM O CLIENTE KAKKAKA

  • @brunotorezani8761
    @brunotorezani8761 3 года назад +33

    Direito ao ponto, resumido e só o principal para utilização, exatamente no que eu buscava

  • @adsonjonatas
    @adsonjonatas Год назад +24

    obs: 10:00 correção, para colocar a mesma distância ENTRE ele é space-between. O space-around é a mesma distância AO REDOR.

    • @nathaliaalves186
      @nathaliaalves186 Год назад +2

      Obrigada! Tô num curso de web design e na aula passada já tava sem entender nada de flexbox e uma das coisas q eu n entendia era diferença de space around e space between VLWWWWW

    • @carlosbarross
      @carlosbarross Год назад

      Mas se fosse ao redor, nao colocaria o mesmo espaçamento no topo tbm?

    • @matheusmx
      @matheusmx Год назад +1

      @@carlosbarross Não colocou no topo porque o flex-direction está definido como row. Então ele coloca o espaço entre os elementos na horizontal

  • @guisonhador
    @guisonhador 2 года назад +4

    Se é loco demorei horas pra aprender esse negócio, o cara em menos de 10 minutos conseguiu explicar esse troço, parabéns ao canal.

  • @rossetti4219
    @rossetti4219 Год назад

    Esse cara é muito bom explicando, Direto ao ponto, sem complicações e além de tudo carismático!

  • @alexsoares9468
    @alexsoares9468 8 месяцев назад

    Explicação sem complicação, excelente!

  • @vandersoninformatica546
    @vandersoninformatica546 Год назад +2

    obrigado finalmente aprendi a posicionar os componentes como eu quero em css.

  • @hildondelimaarruda9659
    @hildondelimaarruda9659 Год назад

    Oi ! Tudo bem ! Me chamo Hildon daqui de Porto Alegre RS
    Não é a bajulação é elogio de verdade agradeço muito por ter vídeos aqui no RUclips igual ao seu na verdade o curso vai ser só pra pegar o diploma
    Obrigado mesmo vc entende de verdade

  • @victoramorim7650
    @victoramorim7650 2 года назад +5

    Sem enrolação, é isso ai! esse vídeo é ótimo

  • @flcordis
    @flcordis 2 года назад +1

    Perfeito, tava em dúvida só nesse assunto um pouco e ajudou agora, obrigado!

  • @seekleonardo7969
    @seekleonardo7969 3 года назад +4

    ótima aula, deu uma noção maravilhosa sobre flex box obg

  • @CosmoAlanpires
    @CosmoAlanpires 3 года назад

    Perfeito, se eu tivesse visto esse video antes não estaria de avf. Pelo menos agora me sinto mais preparado.

  • @fil7ipe
    @fil7ipe Год назад +1

    explicação direta e eficiente, obrigado!

  • @juliocesarcorreiaramos4604
    @juliocesarcorreiaramos4604 2 года назад

    Top o seu tutorial!! Tirou minhas dúvidas! Obrigadão!

  • @Pedromartins1994
    @Pedromartins1994 2 года назад

    Excelente didática, professor ótimo direto ao ponto, parabéns

  • @VeronicaMuanda
    @VeronicaMuanda 8 месяцев назад

    Valeu pela aula
    pode aprender mais ainda☺

  • @vidasaudaveleemagrecimento2109
    @vidasaudaveleemagrecimento2109 2 года назад +39

    Cara sua aula é boa mas vice esqueceu de mencionar que é preciso definir a formatação geral *{} com altura e largura de 100% para poder definir todas as dimensões dos elementos em relação a isso. Tive problemas na hira de usar o align-items por conta disso.

    • @danielkrepk561
      @danielkrepk561 Год назад +2

      Obrigado amigo, eu estava sofrendo com isso.

    • @carlosbarross
      @carlosbarross Год назад

      ​@@danielkrepk561Não e entendi. O * não seleciona tudo? Ele colocaria o html todo em 100% é isso? Não seria melhor usar "HTML {} E colocar width: 100%;?

    • @richardvieira4930
      @richardvieira4930 Год назад

      Agora foi, amigo vc é um amigo!

  • @caiocezarmilhomens5718
    @caiocezarmilhomens5718 Год назад +1

    Muito bom. Grato pelo conhecimento!

  • @guilhermegomes2566
    @guilhermegomes2566 3 года назад +2

    Ótimo vídeo! Direto ao objetivo era exatamente o que eu estava procurando. Vlwww

  • @kellysouza8539
    @kellysouza8539 2 года назад +1

    sensacional!!! Ótima explicação. Parabéns

  • @boludopoop840
    @boludopoop840 2 года назад

    Nossa ótimo tutorial!A apropósito esta funcão é fantástica,ajuda muito dinamicamente.

  • @leonelhelderdcaprio7770
    @leonelhelderdcaprio7770 Год назад

    Cinco estrelas, adorei as dicas.
    gostaria de saber como se tornar um front-end?

  • @manoelnoronha6440
    @manoelnoronha6440 2 года назад

    muito bom, parabéns pelo conteúdo. Ajudou bastante!

  • @renatofreiberger9958
    @renatofreiberger9958 Год назад

    Top! Enfim entendi qual comanda qual eixo!

  • @junheras
    @junheras 3 года назад +1

    COMO SEMPRE, INCRIVEL.

  • @hacknergameplay6250
    @hacknergameplay6250 2 года назад +2

    é tipo uma versão moderna do margin e padding, foi assim que entendi.

  • @felippesoaresportelacarrei3665
    @felippesoaresportelacarrei3665 2 года назад

    Gostei muito da maneira simples que ensinou.

  • @korra9227
    @korra9227 3 года назад

    Me ajudou muito a destravar um projeto!!

  • @dedicadoamarte
    @dedicadoamarte 3 года назад

    Me ajudou muitoooooooooo tava penando aqui.

  • @fabriciodev
    @fabriciodev 2 года назад

    Direto ao ponto, muito boa esta aula.

  • @nicolykeyssiane5646
    @nicolykeyssiane5646 2 года назад

    muito obrigada!!! salvou meu tcc!

  • @andy07x
    @andy07x 2 года назад +2

    Acabei de fecha um video q tava vendo do Ei Nerd... eu pensei: "Poxa, vou parar de ver teorias sobre os filmes da marvel e vou estudar pras provas da semana que vem!.... dai eu cheguei até esse video e... me deparo com o Peter dnv.... demorei uns segundos pra assimilar que eu não estava louco....

  • @mauriciocaiombe8025
    @mauriciocaiombe8025 2 года назад

    Obrigado sou iniciante de Angola

  • @jhoonyb1745
    @jhoonyb1745 2 года назад

    Simples e direto, me ajudou muito!

  • @GuilhermeSouza-mc2tn
    @GuilhermeSouza-mc2tn 3 года назад

    Perfeita explicação!!

  • @autovrum
    @autovrum 2 года назад

    Excelente aula, vou aplicar ao meu projeto.

  • @diegolima2220
    @diegolima2220 2 года назад +1

    que susto por um segundo achei que era o peter que ia ensinar kkkkkkk

  • @GuilhermeTeixeira
    @GuilhermeTeixeira 3 года назад +7

    O vídeo começa erm 1:00

  • @yurihenrique7099
    @yurihenrique7099 3 года назад +1

    Muito obrigado, ajudou muito!

  • @tiagodesouza3805
    @tiagodesouza3805 3 года назад +11

    8:34 engraçado, no meu só deu certo quando coloquei em % o heigth, coloquei 1000px aí deu pra brincar com o align-items

    • @JoseSantos-ss2ob
      @JoseSantos-ss2ob 3 года назад

      para mim também....

    • @anarktv8098
      @anarktv8098 3 года назад +1

      coloque min-height: 100vh; Vai pegar.

    • @lucasbrvr
      @lucasbrvr 2 года назад

      @@anarktv8098 DEUSSS

    • @ederoliv
      @ederoliv 2 года назад

      pra mim tbm

    • @igorluigi2670
      @igorluigi2670 2 года назад +1

      pensei que estava ficando louco, até ver seu comentário, obrigado

  • @jotecch-br
    @jotecch-br Год назад

    E para fazer a inseçao de parametros nos icones criados, atraves da usart?

  • @felipebeloneoficial
    @felipebeloneoficial 3 года назад +2

    Excelente Tutorial. Simples, objetivo e muito claro.

  • @rafaelcampanincarneiro3553
    @rafaelcampanincarneiro3553 2 года назад +4

    Vídeo aula top mano, me ajudou muito ❤

  • @caioleao6170
    @caioleao6170 2 года назад

    Please give a brief description of the plugin, how to use it. How to use the plugin. How to use it.

  • @alyssonwilyan5440
    @alyssonwilyan5440 3 года назад

    Muito esclarecedor !

  • @valdemirochaves
    @valdemirochaves 2 года назад

    Muito bom. Obrigado!

  • @lcplus
    @lcplus Год назад

    legal, mas tem algum vídeo mostrando um exemplo do mundo real? O Flex box serve pra quê? pois pra fazer tabelinhas já existia a

  • @alancristiano__
    @alancristiano__ 3 года назад

    Simplesmente perfeito, clareou demais em relação ao flex, danki sendo danki 🔥

  • @tsoli1996
    @tsoli1996 2 года назад

    Aula bacana demais

  • @kaueportella1926
    @kaueportella1926 Год назад

    No curso da Danki você ensina TailWind?

  • @IuryNovarino
    @IuryNovarino Год назад

    O main pode ser usado como container?

  • @aposenteiComBTC
    @aposenteiComBTC 2 года назад +1

    Engraçado que quando colocamos o a centralização vertical não funciona.

    • @Askki
      @Askki 2 года назад

      Nunca tinha reparado

    • @percepcao7160
      @percepcao7160 2 года назад

      vlw, ja tava ficando doido aqui

    • @pitinhodurinho
      @pitinhodurinho Год назад

      amem irmao obrigado por esse comentario pq ficar no escuro estudando programacao e uma desgraça, ja tava frustrado pq nao tava conseguindo centralizar verticalmente mesmo eu estando seguindo passo a passo

  • @photoshopcomedy5777
    @photoshopcomedy5777 3 года назад

    Obrigado pelo conteúdo.
    Estudo de caso: Comigo centralizou apenas após colocar 1vh no container.

  • @tiago530
    @tiago530 2 года назад

    O melhor vídeo de flexbox que eu já vi, muito bom.

  • @juliocesarproducoes
    @juliocesarproducoes 2 года назад

    Excelente!

  • @carlosbarross
    @carlosbarross Год назад

    Bem que poderia dizer os atalhos de teclado que você usa. Pq toda hora que desço em uma linha, saio dela e depois volto, o cursor pra escrever fica lá no início, na margin esquerda ai atrapalha na indentation e leva mais tempo.

  • @Lukinha16
    @Lukinha16 2 года назад

    Valeu muito obrigado

  • @andrefeijo9868
    @andrefeijo9868 2 года назад

    Tem videos para quem esta começando ?

  • @gunzur
    @gunzur 3 года назад

    Muito massa.
    Vlw cara

  • @luiscarvalho5726
    @luiscarvalho5726 2 года назад

    ótimo tutorial!!!!

  • @sksank6235
    @sksank6235 3 года назад

    Boa noite! E como fazer p deixar centralizado os Child e ao mesmo tempo ele ir pulando linda como estava antes com wrap? Tipo estava os dois em cima e dois embaixo bem próximos .

  • @RaphaelLM-ws7jq
    @RaphaelLM-ws7jq 2 года назад

    Fiz igual o que mostra, mas só fica em coluna no meu css, e a demarcação do border-box não pega em todos (pulando o primeiro border para a terceira posição e vazia ainda).

  • @jail5on
    @jail5on 2 года назад

    Muito bom!

  • @guilhermesampaio4484
    @guilhermesampaio4484 2 года назад

    Vídeo muito bom

  • @VonsterBR
    @VonsterBR 2 года назад

    Dude... u give hope

  • @soyohann
    @soyohann Год назад

    qual tema do vs?

  • @guhsouza3503
    @guhsouza3503 2 года назад

    Qual é essa extensao danki?

  • @cybersync7
    @cybersync7 Год назад +1

    Só não consegui alinhar os item no eixo y, e fiz os códigos iguais.
    EDIT: Consegui trocando o height: 100% por 100vh.

  • @matheuspacheco3959
    @matheuspacheco3959 2 года назад

    +1 Inscrito

  • @AntonioAndrade_TI
    @AntonioAndrade_TI 2 года назад

    Top!

  • @Ramowwn
    @Ramowwn 3 года назад

    Muito top!

  • @carlosbarross
    @carlosbarross Год назад

    08:30 - Pq ao usar height em 100% as divs não tomaram a altura da tela toda, pq 100% é tudo, não?
    Edit:, foi pq ele adicionou no . container e tbm não há nenhum background color inserido?

    • @rayls0n
      @rayls0n 11 месяцев назад

      usa vh ao invés de % no height

  • @laerciomassapa7118
    @laerciomassapa7118 4 года назад +1

    Vídeo curto, mas consegui entender os efeitos do Flex box.

  • @RobsonM84
    @RobsonM84 2 года назад

    sensacional

  • @youngc4rlos861
    @youngc4rlos861 2 года назад

    Mt bom!

  • @carlosarebalo1742
    @carlosarebalo1742 2 года назад

    Gostei, muito bom, porém gerou uma dúvida, como alinhar, centralizar o texto dentro dos child?

    • @justiceirodelixo3939
      @justiceirodelixo3939 2 года назад

      justify-context
      align-itens

    • @thiagopetherson1268
      @thiagopetherson1268 2 года назад

      Para o horizontal, pode usar também o align-self diretamente nos flex-items de forma individual.

  • @gabriellim7550
    @gabriellim7550 2 года назад

    ola,eu não sei como acessar esse simulador que você esta usando no video .

  • @gabrielassis4210
    @gabrielassis4210 3 года назад +1

    qual a extensão usada para a visulização da página em tempo real?

  • @llmsilva1985
    @llmsilva1985 2 года назад

    Qual o nome do plug-in?

  • @vandersoninformatica546
    @vandersoninformatica546 Год назад +1

    adicionem *{height: 100%;} vai ajudar a centralizar o align-items, confia..

  • @1NathanMendes
    @1NathanMendes 3 года назад

    tem como eu fazer esse order em um arquivo css separado? tipo, com id ou sei la? e teria como eu fazer sem id?

    • @anarktv8098
      @anarktv8098 3 года назад +1

      o order é uma propriedade dos flexs itens, não precisa utilizar id

  • @DagurasuKun
    @DagurasuKun 2 года назад

    Alguém aí deu problema no align-items?
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    .container{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    }
    .child{
    width: 20%;
    height: 200px;
    background-color: red;
    border: 1px solid black;

    }

  • @Pdbueno_
    @Pdbueno_ Год назад

    Galera, nao sei porque mas fiz certinho igual o video, porem meu align-itens não funciona em nenhum de seus valores, alguem pode ajudar ?

    • @rayls0n
      @rayls0n 11 месяцев назад +1

      usa vh ao invés de % no height

  • @MariaVitoria-he1on
    @MariaVitoria-he1on Год назад

    lindo lindo lindo

  • @gabrielassis4210
    @gabrielassis4210 3 года назад

    entre não consigo aplicar flex-direction no vs code, não aparece a opção, e quando eu digito "flex-direction: row; manualmente não funciona, os items do container "childs" ficam um em baixo do outro ! como se estivesse em column ou sem o flex-direction definido!, o que deve ser ?

    • @gabrielassis4210
      @gabrielassis4210 3 года назад

      na verdade da dando um mocado de erro por usar as propriedades do css utilizando o elemento dentro do elemento , infleizmente não conseguir utilizar tudo que foi passado nessa aula do jeito que foi mostrado no vídeo!

    • @gabrielassis4210
      @gabrielassis4210 3 года назад

      abrir um outro arquivo para codificar o css melhorou bastante, mas aí começou a falhar quando tento utilizar o align-items: center; com o flex-direction: row; muda nada. só fica alinhado no centro quando utilizo o flex-direction: column;

    • @anarktv8098
      @anarktv8098 3 года назад

      Talvez esteja colocando o display em um local errado. Crie uma div, com 4 divs dentro. Nesta div pai, aplique um width e height em px. O mesmo para os divs filhos, com um tamanho que caibam todos no div pai. Aplique bordas em todos. Depois display: flex no div pai. Irá funcionar. Lembrando que o direction row é o padrão. Ativando o flex no elemento, já fica com ele. Não recomendo fazer totalmente o que há no video. O youtuber comete um erro bem grave de utilizar css inline, e também tem umas pequenas falhas no seu inglês.

  • @ronilucas8788
    @ronilucas8788 3 года назад

    qual é a extensao do tema dele?

  • @MuriloGamerDBR
    @MuriloGamerDBR Год назад

    Que susto, fui ver um tutorial e entrei no canal do Ei Nerd kakakakak

  • @ailtosocorro6381
    @ailtosocorro6381 4 года назад +1

    Esse cara é fera

  • @ezequielanjos4335
    @ezequielanjos4335 3 года назад

    flexbox - fle= xbox?

  • @natsu22050
    @natsu22050 Год назад

    show

  • @mateusm4364
    @mateusm4364 4 года назад +1

    Aumenta o tamanho da fonte do vscode quem assisti pelo celular fica muito ruim.

  • @RicardoSierrarj
    @RicardoSierrarj Год назад

    1.30 e o vídeo ainda não começou. Desistindo

  • @guxtavo2898
    @guxtavo2898 4 года назад +3

    Coloco o vídeo em 2x e aprendo em 5 minutos TuT

    • @guxtavo2898
      @guxtavo2898 4 года назад +10

      Mas aí tenho que ver duas vezes pq não consegui entender de primeira

    • @NINJ4_TR0N
      @NINJ4_TR0N 3 года назад

      não tenho paciência pra vídeos longos, prefiro aprender em pdf ou documentação

  • @darksideeditions4251
    @darksideeditions4251 2 года назад

    Estava tudo funcionando, até a parte onde você tenta centralizar as child flex. Acredito que esteja desatualizado, porque fiquei uma hora conferindo o CSS e nada. Deslike.

    • @leandroogf
      @leandroogf 2 года назад

      Sabe como faz atualmente? Não to mais conseguindo...

  • @Liptokill
    @Liptokill 4 года назад

    show de bola !

  • @smouraguitar
    @smouraguitar Месяц назад

    Aprenda Flxbox em 10 minutos kkkkkkkkkk aonde isso? propaganda enganosa!

  • @รลเ-ฆ4ฃ
    @รลเ-ฆ4ฃ Год назад

    kkkkkkkk

  • @alexsandersouzadacosta6867
    @alexsandersouzadacosta6867 Год назад

    Mano que didática ruim, muito difícil aprender assim

  • @robertomendoncasat5146
    @robertomendoncasat5146 4 года назад

    Top abraço joinha