Proprietà CSS align-content
La proprietà align-content imposta come il browser distribuisce lo spazio tra le righe. Guarda e prova l'esempio con tutti e sei i valori.
La proprietà CSS align-content allinea le righe di un contenitore flex quando c'è spazio disponibile sull'asse trasversale (cross-axis).
La proprietà align-content è una delle proprietà CSS3.
Quando nella flexbox c'è una sola riga, questa proprietà non ha effetto. Richiede più righe all'interno di un contenitore flessibile.
Il valore stretch è il valore predefinito di questa proprietà.
La proprietà align-content accetta i seguenti valori:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch
| Valore iniziale | stretch |
|---|---|
| Si applica a | Contenitori flex multiriga. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.alignContent = "flex-end"; |
Sintassi
Sintassi della proprietà CSS align-content
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;Esempio della proprietà align-content con il valore 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>Risultato
Esempio della proprietà align-content con il valore "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>Esempio della proprietà align-content con il valore "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>Esempio della proprietà align-content con il valore "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>Nell'esempio seguente, lo spazio viene distribuito in modo uniforme tra le righe flex.
Esempio della proprietà align-content con il valore "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>Risultato
Un altro esempio con il valore "space-around". C'è spazio uguale tra le righe flex.
Esempio della proprietà align-content con il valore "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>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| stretch | Fa allungare gli elementi per riempire il contenitore. È il valore predefinito di questa proprietà. | Provalo » |
| center | Gli elementi vengono posizionati al centro del contenitore. | Provalo » |
| flex-start | Gli elementi vengono posizionati all'inizio del contenitore. | Provalo » |
| flex-end | Gli elementi vengono posizionati alla fine del contenitore. | Provalo » |
| space-between | Distribuisce lo spazio in modo uniforme tra le righe flex. | Provalo » |
| space-around | Gli elementi vengono distribuiti con spazio uguale tra di loro. | Provalo » |
| space-evenly | Distribuisce gli elementi con spazio uguale tra di loro, oltre che prima del primo e dopo l'ultimo elemento. | Provalo » |
| initial | Fa usare alla proprietà il suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Pratica
Pratica
What are the possible values for the CSS align-content property?
Was this page helpful?