Gerador de flexbox CSS
Construa um contêiner flexível e seus itens visualmente, depois copie o CSS, classes Tailwind ou estilo incorporado.
Gerador de flexbox CSS
Configure flex-direction, flex-wrap, justify-content, align-items e align-content com menus suspensos, adicione um espaçamento em qualquer unidade e esta ferramenta escreve a regra do contêiner flexível para você — juntamente com uma regra correspondente para seus itens e uma pequena pré-visualização de texto mostrando como as caixas se alinham. Use-a para esboçar uma barra de navegação, uma linha de cartões, uma barra de ferramentas de formulário ou qualquer layout que necessite itens distribuídos, centrados ou envolvidos sem recorrer a uma grade completa.
Os controles de item aplicam flex-grow, flex-shrink e flex-basis uniformemente em todos os itens que você escolher, que é exatamente como funcionam a maioria das linhas flexas reais: uma classe de item governando vários elementos em vez de valores individuais por caixa. Align-content aparece na saída apenas quando flex-wrap está definido como wrap ou wrap-reverse, porque os navegadores a ignoram caso contrário — a ferramenta nunca imprime uma declaração que não faz nada.
Escolha o formato de saída que corresponde à forma como você constrói: CSS simples para uma folha de estilos, classes utilitárias Tailwind (colchetes de valor arbitrário cobrem espaçamentos e bases que não se enquadram na escala de espaçamento padrão) ou um atributo de estilo incorporado para um protótipo rápido ou marcação segura para e-mail. Cada valor é atualizado no momento em que você altera uma opção e a pré-visualização do layout é redesenhada com ela — sem etapa de construção, sem CSS externo para carregar.
Tudo é executado localmente no seu navegador; nada que você configure aqui é enviado para qualquer lugar. Quando o CSS parecer certo, copie-o, baixe-o como um arquivo .txt ou envie-o novamente para a entrada para continuar iterando com outra ferramenta.