Gerador de CSS Flexbox
Crie uma regra de contêiner flexbox CSS a partir dos controles flex-direction, flex-wrap, justify-content, align-items, align-content e gap — copie o bloco .container {} pronto para sua folha de estilos.
Entrada
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-flexbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"flexDirection": "row",
"justifyContent": "space-between",
"alignItems": "center",
"flexWrap": "wrap",
"alignContent": "stretch",
"gap": "16"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-flexbox-generator` tool (CSS Flexbox Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-flexbox-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de CSS Flexbox — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que é Flexbox?
Flexbox (display: flex) é o modelo de layout CSS para organizar itens em uma única linha ou coluna, distribuindo espaço entre eles e alinhando-os sem floats ou posicionamento manual. É a escolha padrão para barras de navegação, barras de ferramentas, linhas de cartões, controles de formulário e qualquer layout onde os itens precisam se alinhar e compartilhar espaço de forma previsível. Esta ferramenta cria o lado do contêiner do flexbox — a regra que você coloca no elemento pai que transforma seus filhos diretos em itens flex.
As propriedades que esta ferramenta gera
- flex-direction — o eixo ao longo do qual os itens fluem:
row(esquerda para direita),row-reverse,column(de cima para baixo), oucolumn-reverse. - justify-content — como os itens são espaçados ao longo do eixo principal:
flex-start,flex-end,center,space-between,space-around, ouspace-evenly. - align-items — como os itens são alinhados ao longo do eixo transversal:
stretch(padrão, preenche o contêiner),flex-start,flex-end,center, oubaseline. - flex-wrap — se os itens permanecem em uma linha (
nowrap) ou quebram em várias linhas (wrap,wrap-reverse) quando ficam sem espaço. - align-content — como múltiplas linhas de itens quebrados são espaçadas dentro do contêiner. Isso só tem um efeito visual quando
flex-wrapéwrapouwrap-reverse— em uma única linha não há nada a distribuir, então a ferramenta a omite completamente do CSS quandoflex-wrapénowrap. - gap — espaçamento fixo entre itens, em pixels, sem precisar de margens em filhos individuais.
Como usar esta ferramenta
- Escolha uma flex-direction para definir o eixo principal do seu layout.
- Configure justify-content e align-items para controlar o espaçamento e o alinhamento ao longo dos eixos principal e transversal.
- Ative flex-wrap se quiser que os itens quebrem para novas linhas em vez de transbordarem ou encolherem — isso revela o controle align-content para espaçamento entre as linhas quebradas.
- Arraste Gap para definir o espaçamento consistente entre os itens.
- Copie o CSS gerado da caixa CSS, ou baixe como um arquivo
.css, e aplique a classe (ou adapte o seletor) ao elemento pai do seu contêiner flex na sua folha de estilos.
A saída é atualizada instantaneamente conforme você ajusta qualquer controle — não há uma etapa separada de "gerar".
FAQ
Por que align-content não aparece no meu CSS?
Só aparece quando flex-wrap é definido como wrap ou wrap-reverse. Com nowrap há sempre apenas uma linha de itens, então align-content não tem efeito de acordo com a especificação CSS — incluir seria apenas código morto, então a ferramenta o omite automaticamente.
Qual é a diferença entre align-items e align-content?
align-items alinha itens dentro de sua linha no eixo transversal. align-content alinha as linhas em si quando há mais de uma (ou seja, quando os itens quebram) e há espaço extra no contêiner.
Isso cobre propriedades por item como flex-grow ou order?
Não — esta ferramenta se concentra na regra no nível do contêiner que se aplica a cada filho de uma vez. Substituições por item (flex-grow, flex-shrink, flex-basis, align-self, order) são definidas individualmente com uma regra separada por filho (por exemplo .item:nth-child(2) { flex-grow: 1; }) diretamente na sua folha de estilos.
Preciso renomear o seletor .container?
Sim — .container é apenas um espaço reservado para que o CSS esteja pronto para colar. Substitua pelo nome da classe ou seletor do seu elemento pai flex real (por exemplo .navbar, #header, .card-list).
Isso funcionará em todos os navegadores?
Sim. Flexbox tem sido suportado sem prefixo em todos os navegadores principais há muitos anos, e gap em contêineres flex é suportado em todos os navegadores modernos também.
Privacidade
Tudo acontece no seu navegador. Nenhum CSS, valor ou configuração que você insira é jamais enviado para um servidor — a declaração é gerada e atualizada localmente conforme você digita.