Propriedade CSS align-content
A propriedade align-content define como o browser distribui o espaço entre as linhas. Veja e experimente o exemplo com todos os seis valores.
A propriedade CSS align-content alinha as linhas de um contentor flex quando existe espaço disponível no eixo transversal (cross-axis).
A propriedade align-content é uma das propriedades CSS3.
Quando existe apenas uma linha na flexbox, esta propriedade não tem efeito. É necessário haver várias linhas dentro de um contentor flexível.
O valor stretch é o valor predefinido desta propriedade.
A propriedade align-content aceita os seguintes valores:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch
| Valor inicial | stretch |
|---|---|
| Aplica-se a | Contentores flex de várias linhas. |
| Herdada | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.alignContent = "flex-end"; |
Sintaxe
Sintaxe da propriedade CSS align-content
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;Exemplo da propriedade align-content com o valor stretch:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: stretch;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: stretch; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Resultado
Exemplo da propriedade align-content com o valor "center":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: center;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: center; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Exemplo da propriedade align-content com o valor "flex-start":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: flex-start; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Exemplo da propriedade align-content com o valor "flex-end":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: flex-end;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: flex-end; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>No exemplo seguinte, o espaço é distribuído de forma uniforme entre as linhas flex.
Exemplo da propriedade align-content com o valor "space-between":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: space-between;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-between; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Resultado
Outro exemplo com o valor "space-around". Existe espaço igual entre as linhas flex.
Exemplo da propriedade align-content com o valor "space-around":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-around; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| stretch | Faz com que os itens se estiquem para preencher o contentor. Este é o valor predefinido desta propriedade. | Experimente » |
| center | Os itens são colocados no centro do contentor. | Experimente » |
| flex-start | Os itens são colocados no início do contentor. | Experimente » |
| flex-end | Os itens são colocados no fim do contentor. | Experimente » |
| space-between | Distribui o espaço de forma uniforme entre as linhas flex. | Experimente » |
| space-around | Os itens são distribuídos com espaço igual entre eles. | Experimente » |
| space-evenly | Distribui os itens com espaço igual entre eles, bem como antes do primeiro e depois do último item. | Experimente » |
| initial | Faz com que a propriedade utilize o seu valor predefinido. | Experimente » |
| inherit | Herda a propriedade do seu elemento pai. |
Prática
Prática
What are the possible values for the CSS align-content property?
Was this page helpful?