Alinhamento de conteúdo com justify-content e align-content
O layout flexbox oferece grande flexibilidade para organizar elementos em páginas web. Duas propriedades essenciais para controlar o alinhamento do conteúdo dentro do container flexbox são justify-content
e align-content
.
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-content
- Função: Controla o alinhamento dos elementos no eixo principal.
- Aplicabilidade: Aplica-se a containers flexbox com
display: flex
oudisplay: inline-flex
. - Valores possíveis:
flex-start
: Alinha os elementos à esquerda (início) do container.flex-end
: Alinha os elementos à direita (final) do container.center
: Centraliza os elementos no container.space-between
: Distribui os elementos 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-content
- Função: Controla o alinhamento do conteúdo no eixo transversal.
- Aplicabilidade: Aplica-se a containers flexbox com
display: flex
oudisplay: inline-flex
. - Valores possíveis:
stretch
: Alinha os elementos para que ocupem toda a altura do container.flex-start
: Alinha os elementos ao topo do container.flex-end
: Alinha os elementos ao final do container.center
: Centraliza os elementos no container.baseline
: Alinha os elementos pela linha de base do texto.space-between
: Distribui as linhas de conteúdo uniformemente com espaçamento igual entre elas.space-around
: Distribui as linhas de conteúdo com espaçamento igual entre elas e nas bordas do container.space-evenly
: Distribui as linhas de conteúdo com espaçamento igual entre elas, inclusive nas bordas do container.
Exemplos práticos
1. Centralizar conteúdo 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; }
5. Centralizar conteúdo verticalmente em um container com altura definida:
HTML
<div class="container"> <div class="item">Item</div> </div>
CSS
.container { display: flex; align-items: center; height: 200px; }
Dicas e considerações
- A propriedade
align-self
permite definir o alinhamento individual de um item dentro do container.
Conclusão
justify-content
e align-content
trabalham juntas para controlar o posicionamento do conteúdo dentro de um container flexbox.
Compreender a diferença entre os eixos principal e transversal é fundamental para usar essas propriedades de forma eficaz e criar layouts flexbox flexíveis e bem organizados.