Dominando Display Flex | Guia para iniciantes

Este vídeo é um guia completo para quem quer dominar o Display Flex no CSS [00:00:00]. O instrutor aborda todas as propriedades em detalhe, explicando os conceitos de Flex Container [00:02:03] e Flex Items [00:24:26]. O curso finaliza com a construção de um projeto prático para consolidar o conhecimento [00:34:30] e ainda sugere uma ferramenta para treinar o que foi aprendido [00:46:43].

O que você vai aprender

• O que é Display Flex (Flexbox) e sua utilidade [00:01:32]
• Conceitos de Eixo Principal (Main Axis) e Eixo Secundário (Cross Axis) [00:17:41]
• Propriedades do Container:
  • display: flex [00:07:32]
  • flex-direction (row, column, reverse) [00:07:05]
  • flex-wrap (wrap, no-wrap) [00:08:48]
  • flex-flow (atalho) [00:11:20]
  • justify-content (center, start, end, space-between, etc.) [00:12:42]
  • align-items [00:16:31]
  • align-content [00:20:28]
  • gap [00:23:20]
• Propriedades dos Itens:
  • flex-basis [00:25:46]
  • flex-grow [00:27:11]
  • flex-shrink [00:29:20]
  • flex (atalho) [00:30:28]
  • order [00:31:29]
  • align-self [00:33:07]
• Projeto Prático: Criação de cards de planos [00:34:30]
• Ferramenta de Estudo: Dica do site Flexbox Froggy [00:46:43]

Pré-requisitos

• Conhecimento básico de HTML [00:02:52]
• Conhecimento básico de CSS [00:01:19]

Para quem é este curso

Desenvolvedores front-end iniciantes que desejam aprender a posicionar elementos de forma eficiente e responsiva com CSS [00:00:06, 00:01:32].