Gerador e laboratório CSS Flexbox
Mude os ajustes para ver como os itens se distribuem. Copie as regras do contêiner para sua folha de estilos.
Funciona localmente no seu navegador · display: flex · alignment · gap
Mude os ajustes para ver como os itens se distribuem. Copie as regras do contêiner para sua folha de estilos.
Funciona localmente no seu navegadorO laboratório escreve uma única regra para o contêiner: display: flex mais flex-direction, flex-wrap, justify-content, align-items, align-content e gap. O palco mostra caixas numeradas para você ver como os controles interagem antes de levar a regra para a folha de estilos.
Não há botão de execução: a prévia e o painel de código acompanham cada mudança. Copiar CSS coloca esse mesmo texto na área de transferência e Redefinir devolve a página ao estado de carregamento: row, wrap, flex-start, stretch, stretch, 16 px, 6 itens.
flex-direction define o eixo principal e a ordem das caixas; flex-wrap permite que os itens ocupem novas linhas; justify-content distribui o espaço livre do eixo principal, então seu efeito é mais fácil de ver enquanto a linha não está cheia.
align-items posiciona os itens dentro da linha e align-content distribui as linhas entre si. align-content só move algo quando o contêiner realmente ocupa mais de uma linha: com nowrap, ou com uma única linha, nada muda de lugar mesmo que a declaração continue no CSS.
O palco desenha tantas caixas numeradas quanto a quantidade de itens pedir e aplica os mesmos valores que saem no CSS. A etiqueta ao lado do título indica os eixos principal e transversal e inverte as setas quando você escolhe uma direção de coluna.
A quantidade de itens afeta só a prévia: não faz parte da regra exportada. Enquanto align-items for stretch as caixas ocupam toda a altura do contêiner; escolha outro alinhamento ou um gap fixo para comparar as linhas.
O código gerado tem um único bloco: .flex-container com display: flex e as seis declarações na ordem mostrada. Não há regras por item, prefixos de fornecedor nem media queries, então basta adaptar o nome da classe e os valores.
A ferramenta roda no navegador: valores e seleções não saem da página. Copiar CSS grava esse mesmo texto na área de transferência e a linha de status confirma, o que também ajuda a preparar a regra de um projeto antes de fixá-la na folha de estilos.