Alinhamento de itens com justify-items e align-items

O layout flexbox oferece grande flexibilidade para organizar elementos em páginas web. Duas propriedades essenciais para controlar o alinhamento desses elementos são justify-items e align-items.

Eixos no layout flexbox

O layout flexbox define dois eixos principais:

• Eixo principal: Determina a direção do fluxo dos elementos filhos dentro do container. Por padrão, é horizontal.
• Eixo transversal: Eixo perpendicular ao eixo principal.

Propriedade justify-items:

• Função: Controla o alinhamento dos itens no eixo principal.
• Aplicabilidade: Aplica-se a containers flexbox com display: flex ou display: inline-flex.
• Valores possíveis:
  • flex-start: Alinha os itens à esquerda (início) do container.
  • flex-end: Alinha os itens à direita (final) do container.
  • center: Centraliza os itens no container.
  • space-between: Distribui os itens uniformemente com espaçamento igual entre eles.
  • space-around: Distribui os itens com espaçamento igual entre eles e nas bordas do container.
  • space-evenly: Distribui os itens com espaçamento igual entre eles, inclusive nas bordas do container.

Propriedade align-items:

• Função: Controla o alinhamento dos itens no eixo transversal.
• Aplicabilidade: Aplica-se a containers flexbox com display: flex ou display: inline-flex.
• Valores possíveis:
  • stretch: Alinha os itens para que ocupem toda a altura do container.
  • flex-start: Alinha os itens ao topo do container.
  • flex-end: Alinha os itens ao final do container.
  • center: Centraliza os itens no container.
  • baseline: Alinha os itens pela linha de base do texto.

Exemplos práticos:

1. Centralizar um único item horizontalmente e verticalmente:

HTML

<div class="container">
  <div class="item">Item</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Distribuir três itens horizontalmente com espaçamento igual:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
  justify-content: space-between;
}

3. Alinhar itens à direita e centralizá-los verticalmente:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

4. Alinhar texto verticalmente com baseline:

HTML

<div class="container">
  <h1>Título</h1>
  <p>Texto</p>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

Conclusão

justify-items e align-items são ferramentas poderosas para controlar o alinha