Ferramentas para desenvolvedores
Guia de Consulta Flexbox
Referência prática de propriedades CSS Flexbox para contentores e itens, com valores predefinidos e exemplos de layout.
Executar ferramenta
Este guia de consulta de CSS Flexbox reúne as propriedades essenciais para estruturar contentores e itens flexíveis na web. A referência organiza os controlos do contentor principal, incluindo a direção do eixo principal com row ou column, a quebra de linha com flex-wrap, o alinhamento no eixo principal com justify-content e o alinhamento no eixo transversal com align-items ou align-content. Inclui também o espaçamento através da propriedade gap, ilustrado com medidas como 16px ou 1rem. Ao nível dos itens individuais, o guia detalha as propriedades de crescimento (flex-grow), redução (flex-shrink), dimensão base (flex-basis), o atalho flex, o alinhamento próprio (align-self) e a ordem visual com a propriedade order. O utilizador encontra igualmente os valores predefinidos do modelo, como a direção row, a ausência de quebra de linha, o alinhamento stretch e a ordem inicial a zero. Para além das propriedades isoladas, o catálogo disponibiliza padrões prontos de código para centrar conteúdos, desenhar barras de navegação, grelhas de cartões com quebra, colunas laterais, rodapés fixos e colunas de largura idêntica.
Instruções
- Abra o catálogo de referência para consultar as propriedades de CSS Flexbox disponíveis.
- Selecione a secção de contentor para rever propriedades como flex-direction, flex-wrap, justify-content, align-items e gap.
- Consulte a secção de itens para verificar definições como flex-grow, flex-shrink, flex-basis, align-self e order.
- Copie os exemplos de padrões de disposição CSS para aplicar em barras de navegação, grelhas ou alinhamentos verticais.
Exemplos
- Configurar um contentor centrado: aplicar display: flex, justify-content: center e align-items: center para alinhar um elemento nos dois eixos.
- Criar uma barra de navegação responsiva: definir display: flex, justify-content: space-between e gap: 1rem para distribuir o logótipo e os links de menu.
Perguntas frequentes
Quais são os valores padrão de um contentor Flexbox em CSS?
Por omissão, o contentor adota a direção row sem quebra de linha (flex-wrap: nowrap), com alinhamento inicial no eixo principal (justify-content: flex-start) e alinhamento transversal em stretch.
Qual é a diferença entre flex-grow e flex-shrink?
A propriedade flex-grow define a proporção de espaço restante que um item pode absorver quando sobra espaço no contentor, enquanto flex-shrink determina a capacidade de redução do item quando o espaço é insuficiente.
Como funciona a propriedade gap num contentor flexível?
A propriedade gap define o espaçamento direto entre itens adjacentes dentro do contentor, aceitando unidades de comprimento como 16px ou 1rem sem necessidade de margens manuais nos itens.
Que padrões de layout estão incluídos na referência?
A referência inclui estruturas de código CSS para centrar conteúdos, barras de navegação, grelhas de cartões com quebra, colunas laterais, rodapés no fundo da página (sticky footer) e colunas de largura uniforme.