Mexa os sliders, clique numa caixa e veja um contêiner flex se reorganizar ao vivo — e copie o CSS exato. O playground inteiro roda no seu navegador.
Tudo acontece localmente no seu navegador. Nada sai do seu dispositivo.
Clique numa caixa para ajustar seu flex individual; clique de novo para deselecionar.
Nenhuma caixa selecionada
O playground é um contêiner flex de verdade: cada controle reescreve os estilos inline do palco, e o painel de CSS espelha exatamente o que você vê. A chave são os eixos. flex-direction escolhe o eixo principal — row vai da esquerda à direita, column de cima para baixo, e as variantes -reverse apenas invertem a direção de escrita. justify-content distribui o espaço livre ao longo desse eixo principal, e align-items posiciona cada item ao longo do eixo transversal, em ângulo reto. Troque o palco para column e veja justify e align trocarem de papéis visuais enquanto os nomes das propriedades ficam onde estão.
Sim, com flexbox é seguro em qualquer navegador moderno: gap em contêineres flex chegou no Chrome 84, Firefox 63 e Safari 14.1, então já se alinha ao padrão Baseline há anos. Firefox teve primeiro e Safari por último — quem ainda suporta iOS 13 ou Safari 13 de desktop precisa de margens no lugar de gap.
Porque o gap não é descontado do basis percentual antes do acerto do box-sizing, e basis em porcentagem resolve sobre o tamanho interno do contêiner. Dois filhos com flex-basis: 50% mais qualquer gap já não cabem, e ficam um por linha. Use bases tipo calc(50% - 8px), ou flex-basis: 0 com flex-grow, e deixe o navegador dividir.
Não de um jeito que deva te preocupar hoje. O Safari 14.1+ implementa fielmente a especificação moderna de flexbox, incluindo gap e align-content com linhas quebradas. A velha dança dos prefixos -webkit-flex só importa se você der suporte a iOS 9-10, e esta ferramenta deliberadamente não gera saída com prefixo.
Quase sempre porque o contêiner tem uma única linha de itens. align-content só distribui linhas flex inteiras, e com flex-wrap: nowrap existe exatamente uma linha, então a propriedade é ignorada. Ative o wrap, force duas linhas com um basis ou min-width, e o controle passa a funcionar.
Não. O playground é CSS puro: suas posições de slider viram uma folha de estilos na memória e são copiadas pela sua área de transferência. Nada é armazenado, enviado ou baixado, e a página continua funcionando sem rede.
Se você acabou de usar Gerador de Flexbox, os próximos passos naturais são Gerador de CSS Grid, Gerador de Box Shadow, Gerador de Border Radius, ou explore todas as ferramentas de Ferramentas diárias.