Resumo

  • O primeiro rascunho público Flexible Box Layout do W3C, de 23 de julho de 2009, descreveu filhos de uma caixa crescendo para ocupar sobras ou encolhendo quando o espaço apertava, com propriedades antigas como box-flex.
  • A Recomendação Candidata de 18 de setembro de 2012 usou display: flex, crescimento, redução e base. O texto candidato de 19 de novembro de 2018 frisou que a mudança visual de ordem não altera a ordem do documento, da fala ou do teclado.

A barra de ferramentas tinha três filhos e uma casa cujas paredes andavam com a janela. O campo de busca queria esticar as pernas. Um botão de nome longo exigia lugar para todas as letras. O terceiro achava suficiente sua largura, até a parede se aproximar. Entre medidas fixas e remendos, cada novo tamanho criava uma discussão. Flexbox escreveu as regras da divisão em CSS. A família continuou barulhenta, mas ganhou uma contabilidade.

O primeiro rascunho público Flexible Box Layout do W3C, publicado em 23 de julho de 2009, falava de interfaces. Os filhos podiam ser dispostos na horizontal ou na vertical. Itens flexíveis recebiam espaço ocioso e podiam encolher quando a casa apertava. O documento apontava o modelo de caixas das interfaces XUL como antecedente. As palavras do rascunho eram display: box, box-orient, box-flex e box-lines. Elas contam como a ideia apareceu; não são uma receita para colar hoje sem olhar o que mudou.

box-flex expressava uma flexibilidade relativa. Um filho com fator dois podia reclamar uma parcela maior que outro com fator um. Mas um limite máximo de largura encerrava o crescimento de um e passava o restante ao vizinho. O tamanho natural do conteúdo e limites mínimos também entravam na conta. O pai oferecia a sala; os filhos dividiam o orçamento dentro de restrições. Para uma barra que precisa sobreviver a janelas grandes e pequenas, era melhor que pregar cada móvel no chão.

A Recomendação Candidata do W3C de 18 de setembro de 2012 reorganizou o acordo. display: flex e inline-flex definiam o contêiner. Os itens seguiam um eixo principal, com outro eixo atravessando-o. A forma curta flex reunia base, fator de crescimento e fator de redução: quanto espaço o item usa de partida, que parte da sobra pode receber e quanto cede no aperto. Assim um campo de busca absorve o excedente enquanto o botão de menu conserva um tamanho útil. Encolha a janela, e o navegador refaz as contas.

A conta não promete que um fator dois termine com o dobro da largura final de um fator um. Cada filho tem um ponto de partida e pode esbarrar em limites. Espaço positivo segue fatores de crescimento; falta de espaço aciona redução e tamanhos. A pergunta útil é quem absorve a mudança quando o contêiner muda. O autor escreve uma relação; o navegador resolve os números toda vez que a janela se move.

O espaço também tem direção. Uma fileira pode seguir um sentido ou o oposto, ou virar coluna. Se houver permissão para quebrar linhas, os itens que não cabem passam adiante; regras de alinhamento posicionam cada grupo nos eixos. Uma caixa horizontal dentro de outra vertical ajuda a compor uma interface complexa. Cada contêiner, porém, negocia primeiro ao longo do próprio eixo principal. Essa divisão local é o assunto de Flexbox, diferente do plano de linhas e colunas que ocupa a história do CSS Grid.

Então os filhos descobriram como trocar os lugares à mesa. A propriedade order do texto de 2012 altera a disposição visual. A especificação preservava uma distinção: fala e navegação sequencial padrão continuam a seguir a ordem da fonte. Um botão que aparece primeiro pode vir depois no trajeto do teclado. Um leitor com mouse e outro com teclado caminham pelo mesmo conjunto de controles em sequências diferentes. Trocar o retrato da família não troca os nomes na lista.

A Recomendação Candidata do W3C de 19 de novembro de 2018 voltou a esse cuidado. order e as direções inversas são ferramentas visuais, não conserto para um documento cujos controles nasceram na ordem errada. O texto também acrescentou precisão à divisão da sobra. Valores de crescimento abaixo de um podem deixar espaço positivo sem uso. “Flexível” não obriga a engolir o último pixel; uma faixa vazia pode ser exatamente o resultado previsto.

Uma tradução mais longa altera a largura de partida de um botão. Um mínimo impede que outro ceda tanto quanto o designer imaginou. Uma quebra de linha reabre a negociação. Flexbox reage às condições, mas não adivinha qual controle é mais importante para o leitor. Cabe ao editor decidir primeiro a hierarquia e o caminho de uso. Só depois faz sentido escolher bases, fatores e alinhamento para sustentá-los.

Flexbox transformou a caixa em administradora de um orçamento variável. Os filhos crescem ou se apertam segundo fatores e limites declarados, e o navegador recalcula cada vez que o espaço muda. Os botões podem negociar seus centímetros. O leitor merece uma rota clara, seja pelo olhar, seja pelo teclado.