Conversor de cores
Converta HEX, RGB e HSL com transparência, veja a amostra e copie valores CSS prontos para usar.
Gerador de CSS Flexbox
Experimente direção, quebra de linha, distribuição e alinhamento e obtenha CSS e HTML prontos para copiar.
Sobre a ferramenta
Organize botões ou controles e teste sua distribuição quando o espaço diminui.
Como usar
Ajuste as propriedades Flex, espaçamento e quantidade de itens. Varie a largura para conferir a quebra de linha. Copie ou baixe CSS e HTML separadamente.
A prévia usa as mesmas propriedades do código. Itens partem de uma base de 100 px e altura mínima de 80 px. Até 48 itens, espaçamento 0–80 px. A largura de teste não entra no CSS exportado.
Perguntas frequentes
A largura da prévia entra na exportação?
Não, ela apenas simula o espaço disponível. A saída inclui regras flex e dimensões básicas dos itens; defina a largura real e a aparência na sua página.
Por que a centralização muda quando escolho column?
justify-content atua no eixo principal e align-items no eixo transversal. Com row, o eixo principal é horizontal; com column, é vertical. Para centralizar nos dois eixos, selecione center nos dois controles e deixe espaço suficiente no contêiner em cada eixo.
Ferramentas relacionadas
Abre em uma nova aba
Comentários
0