HTML & CSS - Aprenda Flexbox em 17 Minutos: Layouts Responsivos com CSS

Quer saber mais sobre o nosso Curso Completo de Full Stack? Clique no link abaixo para garantir sua vaga na próxima turma: https://lp.hashtagtreinamentos.com/full-stack/espera/impressionador?fonte=org-yt_tFUdY3X-V5A&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=flexbox-layouts-responsivos-28-05&conversion=perpetuo-lesfs PARA ACESSAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-html-css-landingpage?origemurl=hashtag_yt_org_minihtmlcss_landingpage_tFUdY3X-V5A&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=flexbox-layouts-responsivos-28-05&conversion=perpetuo-lesfs ----------------------------------------------------------------------- 📁 Arquivos Utilizados no Vídeo: https://dlp.hashtagtreinamentos.com/full-stack/arquivo/download?curso=fullstack&id=1-rhFdO9_zINA5XAZgkUIYu5PJOU3LjxS&origemurl=hashtag_yt_org_arquivofs_tFUdY3X-V5A&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=flexbox-layouts-responsivos-28-05&conversion=perpetuo-lesfs 💻 Recomendação de vídeo: Flexbox CSS - Noções Essenciais para um Layout Flexível [Tutorial] https://youtu.be/rNjSx8rrxBY Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/flexbox-css-html-e-css ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt&origemurl=hashtag_yt_org_incompany_tFUdY3X-V5A&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=flexbox-layouts-responsivos-28-05&conversion=perpetuo-lesfs ----------------------------------------------------------------------- Você sabe o que é o Flexbox? Já ouviu falar, mas não sabe como usar na prática? Nessa aula eu vou te explicar tudo sobre o Flexbox, qual a função dele, como ele pode te ajudar a criar layouts responsivos de forma simples e eficiente e como aplicar cada uma das principais propriedades. Vamos falar sobre como alinhar elementos com justify-content e align-items, como controlar direções, espaçamentos, quebras de linha automáticas e até como mudar a ordem dos elementos sem mexer no HTML. Vou te mostrar também como funciona o flex-grow, flex-shrink e flex-basis, além de ensinar como deixar o layout responsivo de verdade com o flex-wrap. O Flexbox é o CSS que vai te dar muito mais controle e praticidade na hora de montar seus layouts, tornando-os mais responsivos e profissionais! 🔔 Curtiu o conteúdo? Então inscreva-se no canal, ative o sininho e deixe seu like para não perder as próximas aulas sobre HTML, CSS e Full Stack! ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução: Como usar Flexbox no CSS 01:16 Flex Container e Flex Item 02:24 Estrutura do arquivo CSS 03:00 Display: flex — ativando o Flexbox no container 04:15 Justify-content: alinhando elementos no eixo principal 06:25 Align-items: como alinhar no eixo cruzado com Flexbox 07:25 Gap no Flexbox: criando espaçamento entre elementos 08:20 Como estilizar elementos individualmente dentro do Flexbox 08:50 Flex-direction: alterando a direção para coluna 10:18 Layout responsivo com Flexbox: adaptando ao tamanho da tela 12:14 Ajustando tamanhos com flex-grow, flex-shrink e flex-basis 15:45 Como modificar a ordem dos elementos com Flexbox 16:55 Conclusão #fullstack #htmlecss #html #css #javascript #hashtagprogramacao