Como consultar propriedades CSS Flexbox e encontrar exemplos de layouts

Visão geral

O Flexbox organiza elementos numa dimensão, ao longo de uma linha ou de uma coluna. Esta referência ajuda a consultar as propriedades do contentor e dos itens, a compreender os valores listados e a partir de exemplos de CSS para padrões como barras de navegação, cartões que passam para várias linhas, barras laterais, rodapés fixos e colunas com a mesma largura.

É útil quando sabe qual é o efeito de layout que procura, mas precisa de confirmar o nome da propriedade, os valores disponíveis ou a configuração inicial indicada na referência. O conteúdo serve para orientar a escrita e a leitura de CSS; não substitui a confirmação independente do comportamento no navegador.

Como consultar a referência

1. Defina o resultado que pretende obter, como alinhar conteúdo ao centro, distribuir uma barra de navegação ou organizar cartões em várias linhas. Esta decisão ajuda a distinguir propriedades do contentor das propriedades aplicadas a cada item.

2. Consulte a secção correspondente na referência. Para o contentor, procure tópicos como direção do eixo principal, quebra de linha, alinhamento no eixo principal, alinhamento no eixo transversal, alinhamento de várias linhas e espaçamento. Para os itens, procure crescimento, redução, base inicial, a abreviatura flex, alinhamento individual e ordem.

3. Leia a descrição da propriedade juntamente com os valores listados. Registe o valor que corresponde ao efeito pretendido e compare-o com o valor predefinido indicado. Entre os valores iniciais listados estão a direção row, a ausência de quebra de linha, o alinhamento inicial na distribuição do eixo principal, stretch para o alinhamento dos itens, crescimento zero, redução com valor um, alinhamento individual automático e ordem zero.

4. Escolha um padrão de exemplo próximo do seu caso e adapte apenas o necessário ao seu CSS. Para o espaçamento entre elementos, a entrada gap apresenta um valor de comprimento e inclui 16px e 1rem como exemplos.

5. Reveja a combinação final: confirme se a propriedade pertence ao contentor ou ao item e se o valor escolhido não depende de uma predefinição que deixou de ser adequada. Depois, verifique o comportamento no seu próprio contexto de desenvolvimento.

Como interpretar o resultado

A referência deve ser lida como um mapa de propriedades, valores, descrições e padrões de CSS. As propriedades do contentor controlam a direcção dos eixos, a distribuição, o alinhamento, a quebra e os intervalos; as propriedades dos itens controlam, entre outros aspectos, o crescimento, a redução, a base e a ordem. Separar estes dois níveis torna mais fácil perceber onde deve ser feita cada alteração.

Os valores predefinidos são um ponto de comparação, não uma indicação de que todos os layouts devem mantê-los. Por exemplo, um layout que precisa de várias linhas terá de tratar explicitamente a quebra, enquanto um espaçamento pretendido deve ser expresso por um valor de comprimento, como um dos exemplos apresentados para gap.

Os exemplos de CSS ajudam a reconhecer estruturas recorrentes, mas a referência não mede o layout calculado nem apresenta uma confirmação do resultado visual no navegador. Se o comportamento variar devido ao restante CSS, ao conteúdo ou ao contexto da página, faça essa verificação de forma independente.

Exemplo prático

Está a preparar uma barra de navegação horizontal e quer consultar a referência antes de adaptar o CSS.

Para uma barra de navegação horizontal, procure os tópicos de direção do eixo principal, alinhamento e gap. Compare os valores apresentados, escolha a combinação adequada e adapte o padrão de navegação ao seu CSS; se precisar de espaçamento, considere um valor de comprimento como 16px ou 1rem.

A referência devolve uma entrada de propriedade com descrição, valores listados e um padrão de CSS relacionado, permitindo identificar a configuração do contentor e o espaçamento usado.

Limitações

• O conteúdo fornece referência e padrões de CSS, mas não mede o layout calculado nem confirma o resultado visual no navegador; essa verificação deve ser feita independentemente.

Erros comuns

• Um erro frequente é procurar a propriedade no nível errado: aplicar uma opção de item ao contentor, ou o inverso. Confirme a secção a que a propriedade pertence, leia a descrição e só depois adapte o exemplo de CSS.

Perguntas frequentes

Que propriedades CSS Flexbox posso consultar?

A referência cobre tópicos do contentor, como direção, quebra, alinhamento e intervalos, além de tópicos dos itens, como crescimento, redução, base, alinhamento individual e ordem.

A referência inclui exemplos de valores para gap?

Sim. A entrada gap apresenta valores de comprimento e inclui 16px e 1rem como exemplos.

A referência mostra como o layout ficará no navegador?

Para confirmar o efeito final, use os padrões de CSS como ponto de partida e verifique o comportamento no seu próprio contexto, porque o conteúdo disponibilizado é uma referência com exemplos, não uma medição do layout calculado.