Frontend

CSS Flexbox Cheat Sheet

Guia rápido das propriedades de Flexbox para layout flexível.

Container

Define um container flexível.

display: flex;

Define a direção dos itens no container.

flex-direction: row | row-reverse | column | column-reverse;

Alinha os itens ao longo do eixo principal.

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Alinha os itens ao longo do eixo transversal.

align-items: stretch | flex-start | flex-end | center | baseline;

Define se os itens devem quebrar linha.

flex-wrap: nowrap | wrap | wrap-reverse;

Define a capacidade de um item crescer.

flex-grow: [number];

Define a capacidade de um item diminuir.

flex-shrink: [number];

Define o tamanho inicial de um item antes da distribuição do espaço.

flex-basis: [length] | auto;

Permite sobrescrever o align-items para um item individual.

align-self: auto | flex-start | flex-end | center | baseline | stretch;