Playground para resolver dificuldades com CSS Flexbox

 (yoavsbg.github.io)
2 pontos por GN⁺ 2025-01-06 | 1 comentários | Compartilhar no WhatsApp
  • O CSS Flexbox Playground é uma ferramenta de aprendizado para alterar propriedades do Flexbox em tempo real e conferir as mudanças no layout
  • Ao ajustar os controles, é possível comparar imediatamente como as configurações de flex afetam a disposição na tela
  • O exemplo básico começa com a combinação display: flex, flex-direction: row, justify-content: space-around, align-items: flex-start e flex-wrap: nowrap
  • Os itens de 1 a 5 na tela se movem conforme as configurações mudam, facilitando conferir visualmente o resultado do layout
  • É possível copiar o código CSS gerado, o que facilita levar as configurações testadas para o código real

Ferramenta para experimentar Flexbox em tempo real

  • O CSS Flexbox Playground é uma ferramenta interativa para aprender e experimentar propriedades do Flexbox
  • Ao ajustar os controles, as mudanças no layout são refletidas em tempo real
  • É possível copiar o código CSS gerado como resultado dos experimentos

Configuração básica do exemplo

  • A configuração de exemplo de .container usa o seguinte CSS
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: nowrap;
}
  • A tela exibe os itens 1, 2, 3, 4 e 5, permitindo conferir o resultado da disposição com Flexbox

Leituras relacionadas

1 comentários

 
GN⁺ 2025-01-06
Opiniões no Hacker News

  • O Flexbox em si é simples e faz sentido, mas os nomes das propriedades e valores foram definidos no estilo “por comitê”, então não são intuitivos
    Ao tentar lembrar qual é qual entre justify-content e align-items, a pessoa acaba desistindo e vai mudando uma coisa aqui e outra ali até funcionar

    • Acabo sempre consultando o guia de Flexbox do CSS-Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      Há um guia parecido para Grid, e ele também é excelente
    • No Flexbox, é muito difícil memorizar as configurações necessárias para caixas dentro de caixas, para decidir se o conteúdo vai preencher a caixa ou se a caixa vai envolver o conteúdo
      Isso é especialmente importante em SPAs, quando as caixas precisam preencher a tela sem transbordar. No fim, você acaba colocando configurações nada intuitivas como min-width: 0 em vários lugares, mexe em mais algumas coisas e, de algum modo, funciona
      Parece que daria para criar algumas classes CSS que cobririam tudo isso, mas ainda não encontrei uma solução que sirva para todos os casos
    • No inspetor de CSS do Chrome, ao clicar no ícone ao lado da regra display: flex, várias propriedades do Flexbox são visualizadas como ícones, e dá para configurá-las diretamente com cliques
      Na prática, qualquer página vira um laboratório de testes
    • É impressionante como o Tailwind conseguiu deixar isso ainda mais confuso
      justify-content: center vira justify-center, e align-items: center vira items-center; não entendo por que fizeram assim
    • justify-content deveria ter sido chamado de main-axis, e align-items, de cross-axis
      Quando você entende isso, todo o Flexbox fica fácil

  • Embora já tenha sido bastante mencionado, venho recomendando o Flexbox Froggy https://flexboxfroggy.com/, e outras pessoas também aprenderam rapidamente com ele
    Para aprender CSS Grid, https://cssgridgarden.com/ também é bom

    • Gosto da gamificação do cssgridgarden
      É parecido com https://www.codemonkey.com/, que é mais voltado para crianças
    • Há também https://flexbox.tech/, um site favorito de Flexbox bem parecido com o do OP
      Para gerar código Bootstrap, https://build.layoutit.com/ é útil, e para CSS Grid existe https://grid.layoutit.com/. Mas é uma pena que o primeiro só dê suporte até o Bootstrap 4, não ao Bootstrap 5
    • Usei o flexboxfroggy; o conceito é bom e a implementação é bem feita, mas a ausência de autocompletar da sintaxe incomoda bastante

  • Recomendo muito o guia do Josh https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
    Ele aborda em detalhes armadilhas e dicas mais avançadas, como flex-basis, margens automáticas e min-width

    • Foi um dos melhores materiais que já li
      Eu achava que conhecia razoavelmente bem Flexbox e componentes com Tailwind CSS, mas esse artigo satisfez muito bem minha necessidade de uma base teórica

  • É um bom playground
    Alguns anos atrás, criei um guia interativo com um playground parecido no final: https://lik.ai/guides/an-interactive-guide-to-flexbox/
    Às vezes foi útil para refrescar a memória

  • Chegamos a 2025 e, depois de 2 anos e 3 tutoriais, ainda não consigo usar Flexbox direito
    https://flexboxfroggy.com/ também não ajudou muito

    • Depois de usar Flexbox por alguns anos, percebi que ele é parecido com encaixar um USB-A
      justify e align sempre saem invertidos na primeira tentativa
    • Não sei por que é tão difícil de memorizar
      Eu lembro de todo tipo de coisa por anos, incluindo layouts com CSS float, mas, se fico alguns meses sem usar Flexbox, esqueço 80% e preciso reler tudo do começo e passar um tempo em playgrounds
      O problema é que há nomes de propriedades demais, e muitos deles não são intuitivos ou simplesmente parecem nomes errados. Talvez tivesse dado quase na mesma se tivessem usado nomes simbólicos de uma ou duas letras
    • Conheço o flexboxfroggy, mas prefiro aprender “brincando” em vez de lendo e escrevendo, então aquele site não foi útil para mim
      Espero que esta ferramenta ajude; se algo estiver faltando, seria bom avisarem

  • Por que deram a esses atributos os nomes justify-content e align-items?
    main-axis-arrangement e cross-axis-alignment não fariam mais sentido?

    • Deve haver uma explicação, mas, no geral, muitas propriedades de CSS são confusas e pouco intuitivas
      O mesmo vale para color, text-align, position: absolute e position: fixed; até absolute, tecnicamente, ainda é relativo
    • Em termos de discussão, esses nomes servem tanto para Grid quanto para Flexbox e também seguem a convenção de justify-items e justify-self, então há consistência
      Mesmo assim, ainda me confundo com align-content
    • Também é confuso que a forma abreviada grid-template escreva primeiro o eixo y: y1 / x1 / y2 / x2
      Além disso, nem começa do 0, então eu sempre esqueço
    • Não sei se o Google ficou tão focado em usar LLM para contar spoilers de Encanto 2 que sua capacidade de busca regrediu, ou se é justo eu me surpreender por ainda não existir um plugin do Tailwind desse tipo
      Um plugin de aliases para Tailwind que mapeie cross-axis-center para align-items: center e main-axis-between para justify-content: space-between seria rápido de criar
    • Eu não me confundia porque usava a mnemônica de que “justificar texto no meu idioma é na direção horizontal”
      Claro que isso pode ser alterado, mas o comportamento padrão do Flexbox é coberto por essa mnemônica

  • Quando estava aprendendo Flexbox, criei uma cola para consultar as propriedades
    Pode ser útil para outras pessoas também: https://darekkay.com/flexbox-cheatsheet/

    • É bom porque o efeito aparece imediatamente, mesmo sem selecionar nada, e também gosto do fato de ter links para a MDN

  • Como uma cola visual rápida, é bom, mas acho que no fim é preciso usar em vários pontos de projetos para internalizar
    A sintaxe geralmente é bem autoexplicativa, mas row e column são exceções
    Nunca tive grandes dificuldades com a maior parte de Flexbox ou Grid, mas vejo que muita gente se confunde. Entender o box model e usar as ferramentas de desenvolvedor do Firefox ajuda muito ao aprender o modelo do Flexbox. Elas visualizam o contêiner muito bem, e parece que agora as ferramentas de desenvolvedor do Chrome também fazem algo parecido
    flexboxfroggy e cssgridgarden também foram úteis para praticar. Mesmo assim, sempre abro a cola da CSS-Tricks para ver a sintaxe e nunca acerto de primeira se é row ou column

    • Chrome/Edge têm um bom recurso que parece não existir no Firefox
      É possível alternar rapidamente o modo Flex https://imgur.com/a/17iy1eN

  • Esta ferramenta parece limitada demais, pois trata só de 4 propriedades do contêiner
    As propriedades dos itens filhos, que são bastante importantes no Flexbox, ficaram completamente de fora

  • Seria bom haver uma coleção interessante de desafios para praticar layouts em CSS
    Seria legal ter explicações e comentários bem escritos, além de desafios de depuração como “por que este trecho de código não produz o layout desejado?”
    O ChatGPT foi bastante útil para depurar problemas de CSS. Nem sempre acerta, mas geralmente aponta a direção correta. Ainda assim, quero entender mais profundamente como o CSS realmente funciona. Já li livros e tutoriais e sei que, no fim, é um conjunto de regras, mas aplicá-las com precisão é difícil

    • Eu também uso o Claude de forma parecida
      Frequentemente peço para corrigir o CSS e reescrevê-lo para ficar com a aparência desejada, e isso é muito mais rápido do que ficar vasculhando a documentação