Gerador de Flexbox
Configure um contêiner flex e seus itens com controles visuais, veja o layout reagir em tempo real e copie o CSS com um clique.
Seu layout é criado diretamente no seu navegador. Nada do que você define aqui é enviado para o BroBroGo.
FAQ
Qual é a diferença entre justify-content e align-items?
Justify-content distribui os itens ao longo do eixo principal — a direção em que a linha ou coluna flui —, enquanto align-items os posiciona ao longo do eixo transversal. Mude a direção de linha (row) para coluna (column) e os dois eixos se invertem, fazendo com que o justify-content passe a funcionar de cima para baixo e o align-items da esquerda para a direita.
Como funcionam os controles individuais por item?
Selecione um item pelo seu número e defina o quanto ele cresce para preencher o espaço restante (grow), o quanto encolhe quando o espaço está apertado (shrink), seu tamanho inicial (basis) e seu próprio alinhamento no eixo transversal. A propriedade order move um item para antes ou depois na tela sem alterar o HTML. Apenas os itens que você realmente modificar receberão uma regra própria no CSS gerado.
Quando as propriedades wrap e align-content fazem diferença?
Com a quebra (wrap) desativada, todos os itens são forçados a ficar em uma única linha e podem ser espremidos. Ao ativá-la, os itens que não couberem passam para a linha seguinte — é aí que o align-content entra em ação, distribuindo as linhas como um grupo. A propriedade gap define o espaço entre os itens e entre as linhas, sem a necessidade de margens.