Aprenda Flexbox em 20 minutos - Tutorial de Flexbox

📗 Garanta o seu ebook de boas práticas com HTML e CSS gratuito: www.horadecodar.com.br/ebook-melhores-praticas-html-e-css-gratuito/
★ Nossos Cursos: www.horadecodar.com.br/cursos-horadecodar/
O que é o #Flexbox?
Primeiramente gostaria de apresentar alguns conceitos teóricos sobre o Flexbox, que são muito importantes para o entendimento do todo
Flexbox é um valor da propriedade display do #CSS, ou seja, uma adição de funcionalidade a esta antiga propriedade
Como os outros valores de display, o flex vai modificar o modo como os elementos são exibidos
Além disso, sempre estaremos colocando esta propriedade no elemento pai para afetar os elementos filhos
Precisamos criar uma espécie de container para envolver outros elementos e conseguir trabalhar com o flex
E ainda há uma particularidade interessante do Flexbox, que condiciona seus elemento sempre a uma direção
Por padrão os elementos são dispostos em linha (row), mas podemos alterar para a disposição colunar (column) também
Como adicionar o flex ao CSS?
Como dito anteriormente, vamos precisamos encapsular elementos a um elemento pai
Aplicando a propriedade display com flex a este elemento
Sobre o container do Flexbox
Podemos aplicar regras de posicionamento tanto para o elemento pai, como também para os elementos filhos
Primeiramente vamos aprender como alterar a disposição a partir do elemento pai, e depois veremos as regras individuais
Como você já entendeu, o padrão de disposição é em row, mas podemos alterar para colunas
Com a propriedade flex-direction, o valor default é row e podemos colocar column
Há casos que esta formatação atende melhor nossos elementos, e é muito semelhante ao comportamento de divs sem o flex
Vamos remover agora o layout colunar e continuar a falar de outras regras do flex
Alinhamento com Flexbox
Podemos alinhar os itens na horizontal e também na vertical
Para o alinhamento horizontal utilizaremos justify-content, com esta regra temos algumas possibilidades 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: discord.gg/Veq4mvsWwk

[@MatheusBattisti]

⭐ Conheça a nossa plataforma de cursos: www.horadecodar.com.br/comunidade-hora-de-codar/

[@jeffsilva]

Mano.... esse Matheus está se superando.... atualmente um dos melhores professores da Udemy e KZbin... vai nessa força, tu merece. Sempre esmerado.

[@MatheusBattisti]

valeuu Jota, obrigado mesmo pela força! =)

[@codeminde4727]

Quer dominar css? Procure quais as propriedades para o container pai e quais as propriedades para os itens filhos. Enquanto nao dominar esse conceito, sempre o dev, ira passar stress acima de stress, por aplicar as coisas em lugar errado.

[@silvamartins9823]

O que é Pai e filho?

[@claudiomarques-z8g]

E você sabe onde posso encontrar uma aula ou demonstração das propriedades de pai e filho ?

[@moisesmonza4716]

@@claudiomarques-z8g isso é conceito de logica de programacao, mas ele deu uma ideia no inicio da aula. Basicamente elementos pai sao aqueles q encapsula outros elementos dentro de si, como nos 'containers' de exemplo da aula. Os elementos filhos sao todos aqueles que estao inseridos em outros, como os elementos 'item' da aula. Um exemplo que me ajudou a entender isso qnd eu tava iniciando foi o da caixa de sapato klkkk imagine a caixa como elemento pai e o sapato como elemento filho.

[@matheusflores9491]

Mano, vc é foda, estava me batendo muito no Flexbox, em 09:08 de vídeo já me esclareceu muita coisa!!!

[@delicodii5211]

Quantos mais professores bons, melhor. Obrigado! Queria poder dar 2 likes

[@guilhermemachado2580]

Faz um vídeo sobre grid também!

[@MatheusBattisti]

vai ter sim Guilherme!

[@guilhermemachado2580]

@@MatheusBattisti Valeu, Matheus! Deus te abençõe!

[@AndrewsViegasLeal]

Pena eu não te conhecido teus cursos antes de comprar da OBC, paguei 475 reais, estou a 2 meses e mau consegui aprender o grid e flex box, por isso recorri ao YT, onde achei teus vídeos. Tuas alas são ótimas, explica sem pressa, informações completas e bem claras. Eu salvei o link da tua plataforma de curso, caso eu não consiga me adaptar as aulas do curso que já paguei estarei adquirindo os teus cursos.

[@romuloscamargos3956]

Um conselho de quem rodou por anos querendo aprender algo em cursinhos na internet, procura uma boa universidade da sua região e inicia o quanto antes (não faça EAD!), recomendo se quer programar, engenharia de software ou análise e des. de sistemas, lembro que aprendi mais em dois meses na faculdade na prática do que em anos fazendo cursinhos. Existem ótimos cursos online, como os oferecidos por grandes universidade do mundo pela plataforma EdX. De resto não recomendo nenhum, e mesmo se aprender algo, hoje em dia conseguir uma vaga sem um diploma está beeeeem dificil, quase impossível.

[@elizeucorrea7730]

é bom saber que existem conteúdos como esse em meio a tanta baboseira e perca de tempo por ai. Cara, você relamente ajuda muito pessoas que querem aprender de verdade. Obrigado por tirar um pouco do seu tempo e gravar esse conteúdo aqui pra gente! "Gestos simples faz toda a diferença."

[@gustavopacheco6187]

Caralho, o maluco domina o assunto com tanta maestria qual a explicação dele e muito fácil.

[@walterbranco8798]

Explicação enxuta, objetiva e prática. Parabéns!

[@MatheusBattisti]

valeuuu Walter! =))

[@nedersimoes]

Excelente aula! Seria show se pudesse trazer uma aula sobre responsividade.

[@MatheusBattisti]

bom tema Neder, vou anotar aqui para uma próxima aula, obrigado!

[@nedersimoes]

@@MatheusBattisti Show!

[@MarceloGranadeiro]

Up .. esperando para aprender ☺️👏🏾

[@MarceloGranadeiro]

Sou estudante de analise e desenvolvimento de sistemas e para alguns projetos do curso seus vídeos me ajudam muito !!!!! Meus parabéns pela didática,, continue assim

[@MatheusBattisti]

valeu Marcelo!!

[@lhmoreira9]

Comprei seu curso de "PHP do Zero a maestria" Top demais !!! Parabéns ! Assim que terminar, vou iniciar outro !

[@MatheusBattisti]

obrigado Leandro!

[@marciasimplicio776]

Melhor professor mesmo. Comprei de git e github e finalmente entendi, ele ensinando na prática como se estivesse trabalhando em equipe. Nunca tinha visto. Foi o máximo.

[@henriquepicanco97]

Muito bom! Já conhecia Flexbox, mas nunca soube sobre o flex-grow, flex-shrink e flex-basis! A shorthand já conhecia, mas nem tinha ideia de como funcionava direito. hahahaha

[@janainaribeiro4541]

Matheus muito obrigada pela explicação você está de parabéns. De verdade sua didâtica é excelênte. Comprei seu curso na Udemy e foi um dos melhores investimentos que fiz. Quando falam que você é um dos melhores professores da plataforma é verdade. Direto ao ponto sem enrolação simplificando conceitos que pra quem está começando confundem um pouco. Desejo todo sucesso pra você!

[@MatheusBattisti]

oi Janaina, muito obrigado pelas palavras, e espero continuar te ajudando =))

[@eliasmartins9813]

Até que enfim eu consegui entender Flexbox,muito obrigado!!

[@MatheusBattisti]

De nada Elias!

[@predoca46]

Melhor didática!

[@ivyroomgsm]

Extremamente didático. Parabéns!

[@Um_Zuca_Dev_Na_Ilha_da_Madeira]

parabéns pela Aula.

[@caiodouglas6062]

Muito bom!

[@alinnesouza4632]

Aula direta e sensacional. Obrigada!

[@MatheusBattisti]

valeuu Alinne!

[@robertodeoliveira4095]

Muito boa essa aula valeeeeu Matheus.

[@MatheusBattisti]

obrigado Roberto!

[@Seu-Ze]

Ai prof. Vc e dez.

[@MatheusBattisti]

valeuu =))

[@jenny-hg3jy]

Aula excelente professor, obrigada.

[@MatheusBattisti]

📗 Garanta o seu ebook de boas práticas com HTML e CSS gratuito: www.horadecodar.com.br/ebook-melhores-praticas-html-e-css-gratuito/

[@Antonio-go9fp]

Didática muito boa

[@MatheusBattisti]

valeu Antonio!

[@zerielribeiro5787]

Muito boa explicação

[@MatheusBattisti]

valeuuu Zeriel!

[@wevertonsantiago4305]

Perfeito vídeo. Parabéns

[@MatheusBattisti]

valeu Weverton!

[@ronaldobezerra6703]

Cara, essa didática fez toda diferença na apresentação desse conteúdo. Parabéns 👏

[@xpertguinho]

Aprendendo mais aqui do que no curso que paguei pra ter

[@MatheusBattisti]

que bom que estou te ajudando Razuk, abraço!

[@pedrogabrielvilacadiniz8150]

bem didático, ótimo video

[@luisricardobarnabejoenck1757]

uau, muitissimo bem explicado. Parabéns professor.

[@luiscarvalho5726]

Be legal as explicação, valeu!!!!

[@MatheusBattisti]

de nada Luis!

[@renanfernandes1950]

mis uma aula TOP !!!!

[@MatheusBattisti]

que bom que curtiu Renan! =)

[@aldecirdsantos]

Show de bola, muito legallll

[@MatheusBattisti]

obrigado por acompanhar este tb Aldecir!

[@andreray1795]

ótima aula

[@MatheusBattisti]

valeu Andre!

[@mundosdossitesoficial]

Matheus vc ganhou mais um inscrito.. parabéns pela aula... me ajudou bastante nas dúvidas que tinha.

[@nelioaugusto5055]

aula show!!!

[@MatheusBattisti]

valeu Nelio!

[@nomadealex]

Muito boa a aula

[@kurotetsuia3700]

flexbox facilita muito na hora de fazer responsivdade ne

[@joaopedrosassigranado3198]

Comprei seu curso de Git e Github hoje, e pretendo comprar outros pois os seus cursos são os melhores!!!

[@MatheusBattisti]

obrigado João, te espero lá no de git =)

[@mirelledesaalmeida8177]

Muito bommmmmmmmmm seus videos .

[@mbs2488]

Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

[@PedroHenrique-zn6km]

Boa noite Matheus, quando eu quiser usar o wrap, eu não consigo definir quantas caixas eu quero pular pra próxima linha?

[@simonereis969]

muito bom

[@TheWagnersr92]

Excelente explicação. Vai sair um curso de React ?

[@MatheusBattisti]

Vai sim Wagner, acho q em abril

[@AugustoNeves03]

O de Grid layout sai quando? 😅

[@MatheusBattisti]

como a galera tá pedindo, quem sabe semana q vem haha =D

[@guilhermemachado2580]

@@MatheusBattisti Mas aí tu faz com 2 horas de vídeo!

[@gustavomonteiro8163]

Excelente aula, mas tenho uma dúvida, se colocar texto e for diminuindo a tela o texto "escapa" de dentro da caixa, como resolver?

[@elizeucorrea7730]

Dependete muito de como você esta desenvolvendo o seu projeto, porém quando isso acontece tem como tu adicionar uma regra pelo css atráves do @midia pra sua tag se tornar responsiva.

[@flavioleandro4320]

Faz curso de PHP e WordPress juntos

[@MatheusBattisti]

o de PHP já tem hehe, talvez colocar o WP lá

[@maellcarter9065]

Olá professor , tudo bem ? Tenho uma dúvida, sempre que estou procurando por aulas de CSS ouço que um documento um documento pode ter apenas um ID mas como no seu exemplo vejo e em alguns outros sempre vejo usarem mais de um id as vezes. E isso me deixa muito confuso, é um ID em apenas em um documento, mais qual documento ? Pode ter mais de um ID em mais de uma DIV porque não é considerado um documento? Se o senhor ou mais alguém conseguir me explicar agradeceria, obrigado pela ótima aula e até mais.!

[@xurupitas2]

Isso vai de acordo com a necessidade do projeto. Neste caso do exemplo, foi utilizado mais de uma ID pois para cada .item, ele precisava de um style diferente. O ID representado por hash no CSS indica para ele que AQUELA div vai ter seu próprio estilo. No outro caso, ele usa class pois todos os elementos podem ser (de acordo com a necessidade do projeto) com styless iguais. Por fim, acredito que para seu questionamento a resposta é “Depende”. Depende do que está sendo solicitado, da necessidade do projeto e suas características. Estou estudando também é acredito que seja uma boa ideia, ou pelo menos um começo 🤔🤔🤔

[@Caminhosdosul]

Uma curiosidade, como tu faz para a page atualizar sem tu dar f5 quando tu mexe no código??

[@MatheusBattisti]

é a extensão Live server!

[@hamiltoncesarprestesdasilv7659]

qual o theme que o Professor está usando nessa aula no vscode?

[@CelowsBR]

Tema padrão.

[@ederdaniel22]

Boa noite professor, tentei adquirir o curso de HTML e CSS na Udemy, mas não aceita pagar, tentei com cartão e boleto, mas nenhum dois deu certo, se puder me ajudar eu agradeço.

[@MatheusBattisti]

Opa Eder, o que acontece ?

[@ederdaniel22]

@@MatheusBattisti Eu entro faço o pedido, seleciono o cartão e clico em pagar, o sistema pede pra entrar em contato com o suporte, já enviei, mas não obtive resposta

[@entonykaty2614]

como ele pula de um valor de propriedade para outro tão rapidamente? e colocar como comentário tão rápido?

[@peter8796]

esse flex-basis e flex-grow não entra na minha cabeça por nada

[@CLEISON304]

Que desgraça meu programação que inferno coisa do demonio viu