Como usar
- Digite um Nome da classe para o contêiner, como barra-de-ferramentas. O CSS o usa como seletor de classe.
- Escolha flex-direction, flex-wrap e os valores de alinhamento. Cada um mostra o seu valor inicial primeiro.
- Defina o Número de itens (1 a 12) e, depois, o flex-grow, o flex-shrink e o flex-basis de cada item.
- Verifique a Visualização, depois copie o CSS para a sua folha de estilo e coloque a classe no contêiner.
As propriedades do contêiner
O Módulo CSS Flexible Box Layout (em inglês) dispõe os filhos de um contêiner flex ao longo de um eixo principal. flex-direction escolhe o eixo, e flex-wrap escolhe se os filhos podem passar para uma nova linha. justify-content distribui os filhos ao longo do eixo principal, e align-items e align-content os posicionam no eixo transversal.
- flex-direction começa com row e aceita row-reverse, column ou column-reverse.
- flex-wrap começa com nowrap e aceita também wrap ou wrap-reverse.
- justify-content começa com flex-start, e align-items e align-content começam com stretch.
As propriedades do item
Cada filho do contêiner é um item, e suas três propriedades flex decidem quanto espaço ele recebe. flex-grow começa com 0 e ocupa o espaço livre na proporção do fator. flex-shrink começa com 1 e diz quanto um item cede quando há pouco espaço. flex-basis começa com auto, que usa o tamanho que o item tem, e um comprimento ou uma porcentagem define primeiro um tamanho.
flex: flex-grow flex-shrink flex-basis; o valor inicial é 0 1 autoO que a ferramenta não escreve
- As propriedades order, align-self e gap, que você pode acrescentar ao contêiner ou a um item à mão.
- Itens além do décimo segundo: a ferramenta para em 12 itens, então uma lista maior precisa de regras escritas à mão.
Exemplo resolvido: uma barra de ferramentas com quebra de linha e três itens
O nome da classe é barra-de-ferramentas, flex-wrap é wrap, justify-content é space-between e align-items é center. O primeiro item mantém os valores iniciais, então não tem regra. O segundo cresce para ocupar o espaço livre, com base de 0. O terceiro mantém o seu tamanho, com base de 200px. A ferramenta escreve uma regra só para o segundo e o terceiro itens.
| Item | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
Perguntas frequentes
Qual é a diferença entre flex-grow e flex-basis?
O flex-basis é o tamanho do qual um item parte antes de o espaço livre ser repartido. Depois, o flex-grow decide como esse espaço é repartido, na proporção do fator de cada item. Um item com base 0 e flex-grow 1 ocupa o espaço que os outros deixam.
Por que o primeiro item do exemplo não tem regra?
Os valores dele são os valores iniciais das propriedades: flex-grow 0, flex-shrink 1 e flex-basis auto. O navegador usa esses valores sem regra, então a ferramenta escreve uma regra só para um item que seja diferente deles.
Por que align-items começa com stretch?
O Módulo CSS Flexible Box Layout dá a align-items o valor inicial stretch, então os itens preenchem o eixo transversal, a menos que você escolha outro valor. A ferramenta parte do mesmo valor, então o CSS corresponde ao que o navegador faz sem nenhuma declaração.
Por que a base aceita somente px, rem, em e porcentagem?
Essas são as unidades que a ferramenta verifica. Uma base auto, ou o 0 sem unidade, também são aceitas. Outras unidades, como vw, não são oferecidas aqui, então escreva-as à mão se o seu layout precisar delas.
Posso acrescentar um espaço entre os itens?
Não com esta ferramenta, que escreve apenas as cinco propriedades do contêiner e os valores flex dos itens. Acrescente um gap à regra do contêiner à mão, depois de copiar o CSS.
O CSS que eu crio é enviado para algum lugar?
Não. A visualização e o CSS são feitos no seu navegador. Nada é guardado nem enviado ao nosso servidor, então copie o CSS antes de sair da página.
Fontes
Números e texto verificados pela última vez em quinta-feira, 12 de novembro de 2026.