Parque Flexbox
Aprenda o flexbox visualmente – inverta as propriedades e observe a resposta do layout.
Como usar Parque Flexbox
- Defina a contagem de itens para corresponder aproximadamente ao seu layout real.
- Vire os menus suspensos — direção, justifique o conteúdo, alinhe os itens, ajuste, lacuna — e observe a resposta.
- Aprenda a inverter o eixo: mude a direção e teste novamente justificar versus alinhar — o insight principal do flexbox.
- Copie a combinação vencedora no contêiner da sua folha de estilo. regra.
O que é Parque Flexbox?
Um playground flexbox é um sandbox interativo para o sistema de layout principal do CSS: menus suspensos para flex-direction, justify-content, align-items, flex-wrap e gap, um contêiner ativo de itens que reorganiza no instante em que você altera um - o loop de causa e efeito que faz o flexbox finalmente click.
O notório obstáculo de aprendizado do Flexbox é seu sistema de eixos: justify-content funciona ao longo do eixo principal e align-items ao longo do eixo cruzado - mas que muda quando a direção muda de linha para coluna. Ler essa frase raramente ensina isso; virar o menu suspenso e assistir faz.
Sobre o Parque Flexbox
Defina as propriedades do contêiner e observe os itens numerados obedecerem: direção da linha ou coluna, justificação do início flexível até o espaço uniformemente, alinhamento, quebra automática, tamanho do intervalo e contagem de itens — todas as combinações visíveis imediatamente.
Os experimentos que mais ensinam: definir a direção para a linha, percorrer o conteúdo justificado por todos os seis valores, depois mudar a direção para a coluna e percorrê-los novamente — a inversão do eixo se torna intuitiva em um minuto; compare o espaço entre, o espaço ao redor e o espaço uniformemente lado a lado (a diferença no espaçamento das bordas que os diagramas de documentação nunca atingem); e alterne o wrap com uma dúzia de itens para ver como o flex lida com o overflow.
Ele também funciona como uma referência de trabalho: recrie o layout com o qual você está lutando, encontre a combinação de propriedades que o corrige e transfira os valores vencedores para seu CSS. Centralizar um div — a eterna questão — é justify-content: center; align-items: center, verificável aqui em dois cliques.