Aprenda CSS Flexbox em 30 minutos - Curso de Flexbox para iniciantes

Описание: Domine o Flexbox em apenas 1 vídeo!

⭐ Curso completo de HTML e CSS: https://app.horadecodar.com.br/course...

📘 Ebook de Dicas de HTML e CSS: https://app.horadecodar.com.br/ebookp...

🗃️ Arquivos: https://github.com/matheusbattisti/fl...

Entre no nosso servidor de Discord e me siga nas redes:

🟣 Discord Hora de Codar:   / discord  
🔴 Instagram:   / horadecodar  
🔷 Telegram: https://t.me/horadecodar

Neste vídeo, veremos o CSS Flexbox do básico ao avançado, um modelo de layout que simplifica o design de páginas web responsivas.

Começamos estabelecendo estilos gerais para o nosso documento HTML, criando uma base com um layout limpo e organizado. À medida que avançamos, você descobrirá como criar um container Flexbox e estilizar os itens flex de forma eficaz. O tutorial aborda propriedades essenciais como flex-direction, que determina a direção em que os itens flex são dispostos, seja em linhas ou colunas.

Em seguida, exploramos flex-wrap, permitindo que os itens se ajustem em várias linhas quando necessário. Você verá demonstrações práticas de como usar justify-content para alinhar seus itens ao longo do eixo principal, oferecendo opções como alinhá-los ao início, ao centro ou distribuir o espaço uniformemente.

O alinhamento vertical também é crucial, e abordamos align-items, mostrando como controlar o alinhamento dos itens flex ao longo do eixo cruzado. Além disso, introduzimos align-content, que gerencia o espaçamento entre as linhas flex, ajudando a criar um layout equilibrado.

A ordem dos itens pode ser tão importante quanto seu alinhamento, então explicamos como manipular a ordem visual dos seus itens flex usando a propriedade order. Adicionalmente, cobrimos flex-grow, que determina quanto espaço um item pode ocupar em relação aos seus irmãos.

O alinhamento individual dos itens é tratado com align-self, permitindo que você substitua as configurações de alinhamento gerais para itens flex específicos. Ao longo do vídeo, incluímos exemplos práticos, como criar um menu de navegação e um layout responsivo que se adapta a diferentes tamanhos de tela.

Bora aprender mais sobre Flexbox? =D