COMO ORGANIZAR OS ELEMENTOS NA PÁGINA COM FLEXBOX - HTML E CSS

Поделиться
HTML-код
  • Опубликовано: 7 фев 2025
  • Entendendo o flexbox você conseguirá posicionar os itens vertical e horizontalmente e assim conseguirá facilmente construir qualquer site usando apenas html e css de forma fácil.
    Nesse vídeo vou te mostrar as principais propriedades do flexbox para você já conseguir aplicar em seus projetos.
    Video sobre os tipos de display(block,inline e inline-block): • OS TIPOS DE DISPLAY DO...

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

  • @eduardojavascript
    @eduardojavascript  3 года назад +23

    Se gostou, deixe seu like pra me motivar a continuar trazendo vídeo, se inscreva no canal e ative o sininho da notificação pra receber os próximos vídeos. Valeu!! 😜👍

  • @Imperiomotiva7
    @Imperiomotiva7 Год назад +11

    comecei a pouco tempo aprender HTML e Css e suas explicações são bem claras e parabéns pelo modo que vc ensina é bem didático.😅

  • @emersonjunior7207
    @emersonjunior7207 14 дней назад

    Ajudou demais, Eduardo. Que Deus abençoe!

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

    Explicou quase tudo em minutos. Estou fazendo um curso a dias e tinha varias dúvidas e com sua explicação simples e didática resolveu minha ansiedade .

  • @777klmasters
    @777klmasters Год назад +5

    N manjo nada de html, aprendi pouco na faculdade. Agora estou desenvolvendo dashboard no plotly e sua aula foi muito importante pra eu poder organizar os itens. Obrigado

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

    Pow Eduardo..Cara incrivel ! sua didatica é sensacional ... assisti muitos videos, mas a sua explicação e o gabarito foi sensacional ! Parabens Eduardo poste mais conteudos cara . Obrigado fera!

  • @renatomarques5019
    @renatomarques5019 Год назад +5

    Mano, nunca pare de fazer esses tutoriais! Sua diádica é simplesmente incrível!!!

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

    melhor video que vi sobre flexbox

  • @neandertalmoderno1894
    @neandertalmoderno1894 Год назад +3

    Cara seu conteúdo e forma de explicar foi demais!!!

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

    REI, IMPERADOR, PATRIOTA, GUERREIRO, OBRIGADO, MEU AMIGO.

  • @talitatoledo5570
    @talitatoledo5570 3 месяца назад +1

    explicação clara e direta, deu pra entender tudo sem dúvidas, muito obrigada!

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

    Cara, passei horas tentando posicionar uma imagem... Vou deixar um comentario pq vc me salvouuu, muito obrigado manooo!!

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

    Cara... Que delícia de vídeo, na moral. Parabens entendi o q precisava

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

    Cara, muito bom, bastante didático. Eu vi outros vídeos que mostravam as propriedades e os valores sem todos esses detalhes, e fez toda a diferença. Valeu e parabéns pela criação!

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

      Especialmente na atenção do detalhe que as propriedades align-items e justify-content se invertem ao mudar de column p/ row. Ajudou muito no meu projeto pessoal para portfólio (:

  • @BrunoCarvalhoBLOG
    @BrunoCarvalhoBLOG 9 месяцев назад

    Voltei a estudar programação, depois de anos parado e esse foi o melhor vídeo que vi, referente a essas propriedades. Parabéns!

  • @pedromonteiro7801
    @pedromonteiro7801 2 месяца назад

    grande aula eduardo!!

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

    Procurei bastante uma aula assim
    Com certeza essa é a melhor de todas nesse conteúdo. Por favor, continue
    Parabéns

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

    Obrigado pelas dicas! Finalmente consegui finalizar o projeto que estava fazendo! Ganhou +1 inscrito!

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

    Agora sim, a aula que eu buscava. Obrigado por compartilar.🤝

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

    QUE SHOW DE AULA!
    Era tudo o que eu precisava, muitíssimo obrigado.
    Parabéns!

  • @Gustavo-uk3yo
    @Gustavo-uk3yo Год назад +46

    Tô apanhando tanto nessa área de programação, mas não vou desistir

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

      @shiryu774caso ele utilize javascript ele ta programando

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

      Pô tbm kkkkkkkkkkkkk
      Mas agora é sangue no olho

    • @gabrielvaillant4561
      @gabrielvaillant4561 Год назад +6

      Mesma coisa que andar de bicicleta, início você só toma tombo se andar sem rodinhas. Depois já era, vai começar a andar sem as mãos, andar de uma roda(lá ele), fazer acrobacias, derrapar e os caramba

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

      @@gabrielvaillant4561 meu, to a 1 semana estudando essa merda e to tomando um paaaaaaaaau pro html krl back end é mt mais facil

    • @thetraveler9622
      @thetraveler9622 10 месяцев назад +1

      Não é programação, eu particularmente detesto css, mas adoro programas interfaces com outros frameworks
      Desenvolvimento web não é minha praia

  • @Nayansousa-i8b
    @Nayansousa-i8b Год назад +1

    Top, era oque eu tava querendo pra organizar meu site

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

    Aula de mestre mano! Fazendo páginas web tutorial isso não é aprofundado... Essa sua aula é de grande ajuda! Obrigado!!

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

    Não sou de comentar, mas essa aula mereceu.
    Muito obrigado! Depois de ter rodado 1000 vídeos, só consegui pegar o assunto nesse, valeu mesmo!

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

    Espero que seu canal prospere mais e mais mano, a forma como você explica o conteúdo é sem igual!

  • @MarcoAurelio-cm8tx
    @MarcoAurelio-cm8tx 9 месяцев назад +1

    🔝 Grato por compartilhar conhecimento.

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

    Mano , te amo tmnc 1 mês de curso e nn aprendi o que aprendi em 13 min

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

    Você manda muito bem, aprendi muito hoje com o seu conteúdo, obrigada.

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

    Muito obrigada pelo conteúdo! Eu estava sofrendo pra entender isso! Cheguei na metade de uma apostila de HTML e CSS e nem chegou perto da sua didática! Parabéns!

  • @รลเ-ฆ4ฃ
    @รลเ-ฆ4ฃ 2 года назад +1

    Parabéns viu irmão? única aula que consegui entender! merece reconhecimento pela didática excelente!

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

      Opa, valeu, que bom que gostou. Em breve terá mais videos

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

    me ajudou bastante a antender o que e uma div e uma class obrigado

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

    ÓTIMA aula. Me ajudou muito

  • @dev.expert
    @dev.expert 6 месяцев назад

    muito obrigado mano,so consegui entender flex box graças a esse video

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

    Estava com dificuldades para entender o que o professor passou, mas depois do seu vídeo aprendi e coloquei em prática. Obrigado!

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

    Seu video me salvou camarada, muita luz pra voce

  • @itsmeanna.
    @itsmeanna. 4 месяца назад

    Cara, você ensina muito bem

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

    Era exatamente isto que estava procurando. Obrigado!

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

    Aula incrivel, estava com dificulades referente a esse assunto, material obejetivo e com linguagem simples, parabéns e não pare!

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

    Boa aula mano, parabéns.

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

    Esse foi o vídeo que mais aprendi, parabéns cara!

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

    Alto e claro! Muito bom conteúdo, meu camarada! Tá ajudando muito!

  • @jeanpatrick6046
    @jeanpatrick6046 4 месяца назад +1

    Parabens pelo video ajudou bastante.

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

    CSS pra aprender é só saber criar os parâmetros certos pra vc conseguir visualizar como vc fez dando um Background de outra cor e aumentando o tamanho, agora minha ficha caiu e vai ser bem mais fácil estudar isso, vlw, ótimo conteúdo.

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

    muito foda sua aula mano vlw mesmo

  • @BrunoSantos-zy2fu
    @BrunoSantos-zy2fu Год назад

    Grande explicação genial! Finalmente estou a comecar a perceber o Flex!

  • @djlibertario7081
    @djlibertario7081 4 месяца назад

    Deixando o meu like 👍

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

    Muito foda mano, continue com as aulas!

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

    top o vídeo, me salvou.

  • @yamishawty
    @yamishawty 10 месяцев назад +1

    salvou minha vida, muito obrigado

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

    Muito interessante e muito bem explicado ! Excelente didática !

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

    Cara que aula sensacional, meus parabens

  • @Hamilton-t1p
    @Hamilton-t1p 9 месяцев назад +1

    muito obrigada, foi de grande ajuda.

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

    Parabéns, mano. Seu vídeo é bem didático principalmente pra quem está fazendo notas e precisa da explicação logo em seguida.
    Mais um escrito ❤

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

    parabéns pela aula mano, ensina muito bem

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

    Conteúdo top d+, obrigado.

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

    Vídeo muito bom

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

    Muito top sua explicação. Obrigada 👏

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

    Muito teu vídeo ajudou de mais

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

    Mega aula! Parabéns irmão, muito obrigado!

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

    Explicação incrível, muito simples de entender e me ajudou demais! Vlw mano!

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

    excelente explicação mano, ajudou muito, obrigado!

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

    Mano esse video me salva demais quando estou com duvida, obrigado mesmo, se puder faz um video explicando sobre position. abraço

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

      Eu não tenho um video especifico sobre position, mas nesse video aqui eu falo sobre position absolute e relative de forma detalhada: ruclips.net/video/rboSA7728kk/видео.html&ab_channel=EduardoMota

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

    Bom demais.

  • @cabanahip-hop7205
    @cabanahip-hop7205 Год назад

    show man.. mais um inscrito.. hehehe

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

    No caso do space-around, ele coloca o mesmo espaço em cada lado das divs, ou seja, ele colocou 4 espaços iguais ao lado das divs, ele colocou um espaço antes e depois de cada div, pelo menos foi isso que entendi

  • @VINICIUSSANTOS-qw4xv
    @VINICIUSSANTOS-qw4xv Год назад

    nossa,obg irmão,graças a vc fiz um trabalho aqui

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

    único lugar que encontrei exatamente o que eu queria

  • @driaMuniz_Cyber
    @driaMuniz_Cyber 6 месяцев назад

    que explicação top!!

  • @avexboy3839
    @avexboy3839 4 месяца назад

    Grande ajuda mano !!

  • @paular.6110
    @paular.6110 2 года назад

    que aulãooo!

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

    PARABÉNS IRMÃO, ÓTIMO VÍDEO ME AJUDOU DEMAIS!!

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

    Excelente vídeo. Parabéns

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

    +1 inscrito muito bom ajudo muito 👍.

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

    Maravilhosooo!!

  • @LucasSouza-ei2ve
    @LucasSouza-ei2ve 2 года назад

    caraca man me ajudou muito com essa aula

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

    Mais um video sensacional !!obg

  • @nossoCS
    @nossoCS 9 месяцев назад +2

    E se eu quiser personalizar a localização da div? colocar em um lugar especifico

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

    Top!

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

    Que conteúdo bom!! me inscrevi aqui tá, se puder fazer um vídeo tanto como explicativo como esse para Display grid a comunidade agradece

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

    Muito top a explicação .
    Apenas uma pergunta , no caso pela didática a o html e o Styles css estão no mesmo corpo correto ?

  • @Finottichaveiro
    @Finottichaveiro 22 дня назад

    Uma dica, usar o Liverpool Server. Toda vez que salva o script ele atualiza a página automaticamente

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

    Por exemplo nessa parte que fica em azul, qual comando eu coloco para preenceher a borda lateral que ficou em branco?

    • @Brasil.2033
      @Brasil.2033 Год назад

      Na verdade nao é uma borda, é que o navegador que ele usou, tem uma definicao por padrao de padding e margim; se vc colocar no css este codigo, este espaço em branco em volta do azul é preenchido:
      *{margin: 0%;}, pois ele vai setar tudo que estiver de margim na pagina para 0, e ai vc devine a margin que vc quiser para qualquer coisa.

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

    Quando você colocou o aling-items: center, ele não centralizou de primeira porque não tinha espaço, certo? Por isso foi necessário colocar uma altura (height)

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

    Po me tirou mó duvida, muito obrigado

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

    finalmente aprendi ..

  • @Comentarios_espetacular
    @Comentarios_espetacular 14 дней назад

    ensina muitooooooooooooo

  • @leoshevchenko1262
    @leoshevchenko1262 9 месяцев назад

    E se eu quiser alinhar em posições diferentes cada div?

  • @vithormatos9244
    @vithormatos9244 7 месяцев назад

    Cara, a div container não pode ser o body?

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

    eu te amo

  • @larinascimento6175
    @larinascimento6175 2 месяца назад

    Tenho 4 imagens uma do lado da outra
    Quero 2 em cima e duas em baixo

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

    Só nao consigo entender uma coisa, essas propriedades que refere no vídeo não teria que ser aplicadas no .elemento?

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

      Tem que ser no .container, pois você vai modificar um grupo de elementos que estão ali dentro. Ou seja, no momento em que você coloca "display:flex" dentro do .container, todos os elementos que estão dentro do .container irão ficar um do lado do outro, os demais elementos que estão fora do .container não irá sofrer alterção.

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

    não funcionou no meu 😭😭

  • @LanaAlcântara
    @LanaAlcântara 3 месяца назад

    poxa, assim misturado com CSS me complica, prefiro separar

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

    Queria saber como faz pra substituir os blocos vermelhos por image

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

      Inserir a tag IMG, lá no HTMl, ou a background-image url no css

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

      Img scr"aqui vice bota sua foto que tá na sua pasta" atl "a qui é o pro leitor pra cegos"

  • @grazielecastilho2881
    @grazielecastilho2881 4 месяца назад

    tu é brabo demais! to com uma duvida e ngm consegue me dar uma mao man, eu poderia entrar em contato com vc pra te mandar meu problema?