Aprenda Flexbox em 10 Minutos | Tutorial de HTML & CSS

Подписаться 164 тыс.

Просмотров 103 тыс.

50% 1

💥 Pacote Master (ESPECIAL, O MELHOR!):
pacotefullstac...
🤖 Curso Dev Apps:
cursos.dankico...
🦾 Curso de Python Completo:
cursos.dankico...
🎮 Curso Desenvolvimento de Games:
cursos.dankico...
🔥 Combo Master (TEMPORÁRIO):
cursos.dankico...
💪 Viver de Negócio Online (Meu Treinamento para Criação de Negócios Online):
viverdenegocio...
✍️ Viver de RU-vid (Peter Jordan & Danki Code):
cursos.dankico...
🔔 Danki Code:
✓ Instagram → @dankicodeoficial
✓ Facebook → /dankicode
✓ Instagram (Pessoal) → @guigrillo13
💎Baixe o App da Danki Code (para alunos):
play.google.co...
apps.apple.com...
💥 Hospedagem de Site que Recomendo:
www.hostgator....

Опубликовано:

2 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

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

@DankiCode 3 года назад

Consultoria grátis: instagram.com/guigrillo13

@pedroshelbyy 3 года назад

Opa

@joynan11 3 года назад

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

@eullerl4768 2 года назад

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

@Gabryel-g2i Месяц назад

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

@ninaachan7505 13 дней назад

MDS SIM, ENGANARAM O CLIENTE KAKKAKA

@vandersoninformatica546 Год назад

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

@adsonjonatas Год назад

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 Год назад

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 Год назад

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

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

@@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

@vidasaudaveleemagrecimento2109 Год назад

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 Год назад

Obrigado amigo, eu estava sofrendo com isso.

@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 Год назад

Agora foi, amigo vc é um amigo!

@CyberWorld7x Год назад

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

@brunotorezani8761 3 года назад

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

@tiagodesouza3805 3 года назад

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 3 года назад

para mim também....

@anarktv8098 2 года назад

coloque min-height: 100vh; Vai pegar.

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

@@anarktv8098 DEUSSS

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

pra mim tbm

@igorluigi2670 2 года назад

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

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

Me ajudou muito a destravar um projeto!!

@GuilhermeTeixeira 3 года назад

O vídeo começa erm 1:00

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

herói!!!

@frdsofficial 2 года назад

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

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

Nunca tinha reparado

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

vlw, ja tava ficando doido aqui

@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

@andy07x 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....

@DagurasuKun Год назад

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; }

@alexsandersouzadacosta6867 Год назад

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

@RaphaelLM-ws7jq Год назад

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).

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

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

@renatofreiberger9958 10 месяцев назад

Top! Enfim entendi qual comanda qual eixo!

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

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

@vandersoninformatica546 Год назад

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

@jeyjey2766 Год назад

gênio

@MuriloGamerDBR Год назад

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

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

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

@kaueportella1926 10 месяцев назад

No curso da Danki você ensina TailWind?

@guisonhador 2 года назад

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.

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

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

@mauriciocaiombe8025 Год назад

Obrigado sou iniciante de Angola

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

Tem videos para quem esta começando ?

@soyohann Год назад

qual tema do vs?

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

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

@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 7 месяцев назад

usa vh ao invés de % no height

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

Valeu pela aula pode aprender mais ainda☺

@IuryNovarino Год назад

O main pode ser usado como container?

@tiagosantini3123 Год назад

qual a extenção da cor dessa letra?

@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 2 года назад

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

@matheuspacheco3959 Год назад

+1 Inscrito

@victoramorim7650 2 года назад

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

@Pdbueno_ 10 месяцев назад

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 7 месяцев назад

usa vh ao invés de % no height

@diegolima2220 2 года назад

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

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

lindo lindo lindo

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

Qual o nome do plug-in?

@seekleonardo7969 2 года назад

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

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

Dude... u give hope

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

kkkkkkkk

@natsu22050 Год назад

show

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

Top!

@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.

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

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

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

justify-context align-itens

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

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

@fil7ipe Год назад

explicação direta e eficiente, obrigado!

@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

@hildondelimaarruda9659 10 месяцев назад

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 RU-vid igual ao seu na verdade o curso vai ser só pra pegar o diploma Obrigado mesmo vc entende de verdade

@caiocezarmilhomens5718 Год назад

Muito bom. Grato pelo conhecimento!

@guilhermegomes2566 2 года назад

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

@flcordis 2 года назад

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

@kellysouza8539 2 года назад

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

@photoshopcomedy5777 2 года назад

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

@leonelhelderdcaprio7770 Год назад

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

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

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

@sksank6235 2 года назад

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 .

@juliocesarcorreiaramos4604 Год назад

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

@junheras 2 года назад

COMO SEMPRE, INCRIVEL.

@manoelnoronha6440 Год назад

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

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

Qual é essa extensao danki?

@yurihenrique7099 3 года назад

Muito obrigado, ajudou muito!

@CosmoAlanpires 2 года назад

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

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

Valeu muito obrigado

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

muito obrigada!!! salvou meu tcc!

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

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

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

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

@gabrielhipolito8451 3 года назад

live serve

@anarktv8098 2 года назад

@@gabrielhipolito8451 server*

@dedicadoamarte 2 года назад

Me ajudou muitoooooooooo tava penando aqui.

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

Gostei muito da maneira simples que ensinou.

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

Mt bom!

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

Vídeo muito bom

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

Muito massa. Vlw cara

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

sensacional

@rossetti4219 10 месяцев назад

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

@DankiCode 10 месяцев назад

Conte sempre comigo!

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

Excelente!

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

Excelente aula, vou aplicar ao meu projeto.

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

flexbox - fle= xbox?

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

Muito bom!

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

Aula bacana demais

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

Muito bom. Obrigado!

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

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

@DankiCode 2 года назад

Que bom que gostou!

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

ótimo tutorial!!!!

@GuilhermeSouza-mc2tn 2 года назад

Perfeita explicação!!

@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 2 года назад

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

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

Direto ao ponto, muito boa esta aula.

@rafaelcampanincarneiro3553 2 года назад

Vídeo aula top mano, me ajudou muito ❤

@tomsantos220 2 года назад

muito bom professor !! obg

@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 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 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 2 года назад

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.

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

Simples e direto, me ajudou muito!

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

Muito top!

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

Muito esclarecedor !

@ronilucas8788 2 года назад

qual é a extensao do tema dele?

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

Tbm queria saber

@mateusm4364 3 года назад

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

@felipebeloneoficial 2 года назад

Excelente Tutorial. Simples, objetivo e muito claro.

@guxtavo2898 3 года назад

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

@guxtavo2898 3 года назад

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

@NINJ4_TR0N 2 года назад

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

@laerciomassapa7118 3 года назад

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

@ailtosocorro6381 3 года назад

Esse cara é fera

@suportehbc2486 2 года назад

Pra quem sabe pouco ou nada, é melhor procurar outro vídeo, nesse aqui o carinha não explica passo a passo as propriedades, apenas vai empurrando código e fazendo comentários genéricos.