7.1 Propriedade justify-content
Flexbox é maravilhoso para alinhar e distribuir espaço entre elementos dentro de um Flex-container. Uma das propriedades chave para isso é o justify-content, que controla o alinhamento dos Flex-items ao longo do eixo principal.
A propriedade justify-content define como os Flex-items vão se distribuir ao longo do eixo principal do Flex-container. O eixo principal depende do valor da propriedade flex-direction:
- Se
flex-directiontiver o valor derowourow-reverse, o eixo principal será horizontal - Se
flex-directiontiver o valor decolumnoucolumn-reverse, o eixo principal será vertical
Valores:
flex-start: os elementos se alinham no início do container (valor padrão)flex-end: os elementos se alinham no final do containercenter: os elementos se alinham no centro do containerspace-between: os elementos são distribuídos igualmente com espaços iguais entre elesspace-around: os elementos são distribuídos com espaços ao redor e entre elesspace-evenly: os elementos são distribuídos igualmente com espaços iguais entre eles e as bordas do container
Exemplo de uso:
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-start {
justify-content: flex-start;
}
<div class="container flex-start">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
7.2 Valores de justify-content
1. flex-start
Com o valor flex-start, os elementos são alinhados no início do Flex-container, ou seja, do lado esquerdo se o eixo principal for horizontal (row) ou do topo se o eixo principal for vertical (column).
Exemplo de uso:
.container {
display: flex;
justify-content: flex-start;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
2. flex-end
Com o valor flex-end, os elementos são alinhados no final do Flex-container, ou seja, do lado direito se o eixo principal for horizontal (row) ou na parte inferior se o eixo principal for vertical (column).
Exemplo de uso:
.container {
display: flex;
justify-content: flex-end;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
3. center
Com o valor center, os elementos são alinhados no centro do Flex-container. Este valor é útil para criar layouts centralizados.
Exemplo de uso:
.container {
display: flex;
justify-content: center;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
4. space-between
Com o valor space-between, os elementos são distribuídos uniformemente ao longo do eixo principal com espaços iguais entre eles. O primeiro elemento é alinhado ao início do container e o último elemento ao final do container.
Exemplo de uso:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
5. space-around
Com o valor space-around, os elementos são distribuídos uniformemente com espaços ao redor deles. Os espaços entre os elementos serão o dobro dos espaços nas bordas do container.
Exemplo de uso:
.container {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
6. space-evenly
Com o valor space-evenly, os elementos são distribuídos uniformemente com espaços iguais entre eles e nas bordas do container. Este valor garante espaços iguais por todo o container.
Exemplo de uso:
.container {
display: flex;
justify-content: space-evenly;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
7.3 Centralizando um menu
Exemplo de uso em projetos reais — centralizando um menu de navegação:
.nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-item:hover {
background-color: #575757;
}
<nav class="nav">
<a href="#" class="nav-item">Início</a>
<a href="#" class="nav-item">Sobre nós</a>
<a href="#" class="nav-item">Serviços</a>
<a href="#" class="nav-item">Contatos</a>
</nav>
Explicação do código:
.nav: Flex-container para o menu de navegação com elementos centralizados.nav-item: Flex-items (links) com estilos básicos
GO TO FULL VERSION