Desenvolvimento Web - 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/curso-html-e-css-completo/lp 📘 Ebook de Dicas de HTML e CSS: https://app.horadecodar.com.br/ebookpages/boas-praticas-html-e-css 🗃️ Arquivos: https://github.com/matheusbattisti/flexbox_30_min Entre no nosso servidor de Discord e me siga nas redes: 🟣 Discord Hora de Codar: https://discord.gg/Veq4mvsWwk 🔴 Instagram: https://www.instagram.com/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