FLEXBOX: Guia Completo para Iniciantes em CSS
Sobre este curso
Um guia completo para iniciantes sobre CSS Flexbox, mostrando como organizar, alinhar e distribuir espaço entre itens em um container de forma eficiente e responsiva.
Este vídeo é um guia prático e completo para quem está começando a aprender CSS Flexbox [00:00:00]. A instrutora explica os conceitos fundamentais, mostrando como o Flexbox facilita a organização, o alinhamento e a distribuição de espaço entre elementos [00:00:25]. O guia é dividido entre as propriedades do container (pai) [00:01:41] e as propriedades dos itens (filhos) [00:12:22].
O que você vai aprender
- Conceitos Fundamentais:
- O que é Flexbox [00:00:17]
- A diferença entre o container (parent) e os itens (children) [00:01:49]
- Como ativar o Flexbox com
display: flex[00:02:09]
- Propriedades do Container (Pai):
gap(erow-gap/column-gap) [00:04:06, 00:10:46]flex-direction(row, column, row-reverse, column-reverse) [00:04:41]flex-wrap(wrap, no-wrap, wrap-reverse) [00:05:59]flex-flow(atalho para direction e wrap) [00:07:36]justify-content(flex-start, flex-end, center, space-between, space-around, space-evenly) [00:08:41]align-items(flex-start, flex-end, center) [00:10:05]
- Propriedades do Item (Filho):
flex-grow[00:12:33]flex-shrink[00:13:58]flex-basis[00:14:41]flex(atalho para grow, shrink e basis) [00:15:28]align-self[00:16:22]order[00:17:17]
Pré-requisitos
- Conhecimento básico de HTML (criação de
divs, classes, etc.) [00:00:54, 00:01:11] - Conhecimento básico de CSS (seletores,
width,height,background-color) [00:02:22]
Para quem é este curso
Desenvolvedores front-end iniciantes que querem aprender a criar layouts modernos, organizados e responsivos de forma eficiente usando CSS [00:00:05].