CSS flexbox: direção
O curso trata de como os itens do flexbox fluem e de como ganham tamanho. Começa com flex-direction e com a troca entre eixo principal e eixo transversal quando os itens formam uma coluna. Depois vêm flex-wrap, para itens que ficam sem espaço, e align-content, para espaçar as linhas quebradas. Em seguida aparecem flex-grow, flex-shrink e flex-basis, junto com o shorthand flex. A propriedade order reordena os itens na tela, com uma troca de acessibilidade. A última aula monta uma fileira responsiva de cards de preço sem media query.
O que você vai aprender
- ✓Como o flex-direction gira os eixos principal e transversal
- ✓Quebra de itens em linhas novas com flex-wrap e flex-flow
- ✓Espaçamento entre linhas quebradas com align-content
- ✓Crescer e encolher itens com flex-grow, flex-shrink e flex-basis
- ✓Leitura dos valores 1, auto, none e initial do shorthand flex
- ✓Reordenação com order e o custo para a acessibilidade
flex-direction: fileira, coluna e a troca de eixo
O curso passado construiu uma navbar e um modal centralizado, mas todo exemplo manteve o eixo principal na direção padrão: horizontal, da esquerda para a direita. Esse padrão era só um ponto de partida. flex-direction é a propriedade que o gira.
Ler a aula completa grátis →Currículo
7 aulasflex-direction: fileira, coluna e a troca de eixo
Os quatro valores de flex-direction e como justify-content e align-items acompanham os eixos quando eles giram.
flex-wrap: quando itens ficam sem espaço
Como o nowrap aperta os itens antes de transbordar, como o wrap cria linhas novas e o shorthand flex-flow.
align-content: espaçamento entre linhas quebradas
Como o align-content espaça as linhas quebradas no eixo transversal e por que depende do flex-wrap.
flex-grow: distribuindo espaço extra entre itens
Como o flex-grow, com padrão 0, faz os itens ocuparem o espaço que sobra, por igual ou em proporção.
flex-shrink e flex-basis
Como o flex-shrink encolhe itens até a largura mínima do conteúdo, o papel do flex-basis e valores comuns de flex.
order: reordenando itens visualmente
Como o order muda a ordem na tela enquanto leitor de tela e Tab seguem a ordem do HTML.
Juntando tudo: uma fileira de cards responsiva
Uma fileira responsiva de cards de preço que junta quebra de linha, tamanho e order, sem media query.