Sobes.tech
Ajuda para Entrevistas
Recursos
Preparação para a Entrevista
Recursos
Procura de Emprego
Recursos
Jurídico
Voltar às perguntas
Junior

Como usar flexbox para layout de elementos na página?

sobes.tech IA

Resposta da IA

Flexbox (ou Flexible Box Layout) é um módulo CSS concebido para criar layouts flexíveis de elementos num contêiner, permitindo distribuir facilmente o espaço e alinhar os elementos, mesmo quando os seus tamanhos são desconhecidos ou mudam dinamicamente.

O conceito principal do Flexbox é o contenor flex e os seus elementos flex.

Propriedades para o contêor flex (display: flex;):

  • flex-direction: Define a direção em que os elementos flex são colocados no contêor (eixo principal).

    • row (por defeito): horizontal, da esquerda para a direita.
    • row-reverse: horizontal, da direita para a esquerda.
    • column: vertical, de cima para baixo.
    • column-reverse: vertical, de baixo para cima.

  • flex-wrap: Define se os elementos flex se envolvem numa nova(s) linha(s) se não cabem numa só linha.

    • nowrap (por defeito): todos numa linha.
    • wrap: envolvem-se em novas linhas.
    • wrap-reverse: envolvem-se em novas linhas em ordem inversa.

  • justify-content: Alinha os elementos flex ao longo do eixo principal.

    • flex-start (por defeito): no início do eixo principal.
    • flex-end: no final do eixo principal.
    • center: no centro do eixo principal.
    • space-between: distribuição uniforme com espaços entre os elementos.
    • space-around: distribuição uniforme com espaços ao redor dos elementos.
    • space-evenly: distribuição uniforme com espaços iguais entre e ao redor dos elementos.

  • align-items: Alinha os elementos flex ao longo do eixo transversal (perpendicular ao principal).

    • stretch (por defeito, se os elementos não tiverem altura/largura definidas): estica os elementos na altura/largura do eixo transversal.
    • flex-start: no início do eixo transversal.
    • flex-end: no final do eixo transversal.
    • center: no centro do eixo transversal.
    • baseline: alinhamento pela linha de base do texto.

  • align-content: Alinha as linhas de elementos flex ao longo do eixo transversal quando há quebra de linha (flex-wrap: wrap). Funciona de forma semelhante a justify-content mas para as linhas.

    • stretch (por defeito): estica as linhas.
    • flex-start: linhas no início do eixo transversal.
    • flex-end: linhas no final do eixo transversal.
    • center: linhas no centro do eixo transversal.
    • space-between: distribuição uniforme de linhas com espaços entre elas.
    • space-around: distribuição uniforme de linhas com espaços ao redor.

  • gap, row-gap, column-gap: Define os espaços entre os elementos flex (num valor único ou separados para linhas e colunas).

.flex-container {
  display: flex; /* Torna o elemento um contêiner flex */
  flex-direction: row; /* Os elementos são colocados na horizontal */
  flex-wrap: wrap; /* Os elementos envolvem-se numa nova linha */
  justify-content: center; /* Os elementos alinham-se ao centro do eixo principal */
  align-items: center; /* Os elementos alinham-se ao centro do eixo transversal */
  gap: 10px; /* Espaço de 10px entre os elementos flex */
}

Propriedades para os elementos flex (filhos diretos do contêiner flex):

  • order: Define a ordem de exibição do elemento no contêiner (por defeito 0). Os valores menores aparecem primeiro.

  • flex-grow: Define o coeficiente que determina até que ponto o elemento flex pode crescer em relação aos outros elementos no espaço disponível. Por defeito 0.

  • flex-shrink: Define o coeficiente que determina até que ponto o elemento flex pode encolher em caso de falta de espaço. Por defeito 1.

  • flex-basis: Define o tamanho base do elemento flex antes da distribuição do espaço livre. Pode ser em px, %, rem, auto, etc. (por defeito auto).

  • flex: Propriedade abreviada para flex-grow, flex-shrink, flex-basis (exemplo: flex: 1 1 0;).

  • align-self: Redefine o alinhamento do elemento ao longo do eixo transversal, sobrescrevendo align-items do contêiner. Toma os mesmos valores.

.flex-item {
  order: 2; /* Este elemento será exibido em segundo, independentemente da sua posição no HTML */
  flex-grow: 1; /* Este elemento ocupará o espaço restante */
  flex-shrink: 0; /* Este elemento não encolherá */
  flex-basis: 100px; /* Tamanho base de 100px */
  align-self: flex-start; /* Alinhamento deste elemento no início do eixo transversal */
}

.another-item {
  flex: 1 1 auto; /* Forma abreviada: grow: 1, shrink: 1, basis: auto */
}

Flexbox permite criar diversos layouts, desde alinhamentos simples até estruturas mais complexas e adaptativas, controlando a distribuição do espaço e o alinhamento dos elementos dentro do contêiner.

AnteriorPróximo