Proprietà CSS align-content
La proprietà align-content definisce come il browser distribuisce lo spazio tra le righe. Vedi esempi con tutti e sei i valori.
La proprietà CSS align-content controlla come un contenitore flex distribuisce lo spazio extra tra e attorno alle proprie righe lungo l'asse trasversale. Questa pagina spiega quando la proprietà entra in gioco, illustra ogni valore con un esempio eseguibile e mostra come si differenzia dalle proprietà di allineamento correlate.
In un contenitore flex con direzione orizzontale, l'asse principale è orizzontale, quindi l'asse trasversale è verticale. align-content sposta quindi intere righe di elementi verso l'alto, verso il basso o le distribuisce verticalmente — non agisce mai sui singoli elementi.
Quando entra in effetto align-content?
Devono essere soddisfatte entrambe le seguenti condizioni, altrimenti la proprietà non ha alcun effetto:
- Il contenitore deve consentire il wrapping — imposta
flex-wrap: wrap(oppure usa la scorciatoiaflex-flow). Il valore predefinitonowrapmantiene tutto su una singola riga. - Devono essere presenti più di una riga, oltre a spazio libero sull'asse trasversale in cui le righe possano muoversi.
Se vuoi allineare gli elementi all'interno di una singola riga, usa invece align-items. align-content agisce sulle righe come gruppo; align-items agisce sugli elementi all'interno di ciascuna riga. La proprietà align-content è una delle proprietà CSS3.
Il valore predefinito di questa proprietà è stretch.
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. |
| Ereditato | 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 è distribuito uniformemente 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". Lo spazio tra le righe flex è uguale.
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>Con space-evenly, gli spazi prima della prima riga, tra ogni riga e dopo l'ultima riga sono tutti identici — a differenza di space-around, dove gli spazi esterni sono la metà di quelli interni.
Esempio della proprietà align-content con il valore "space-evenly":
<!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-evenly;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-evenly; 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>align-content vs. align-items vs. justify-content
Queste tre proprietà si confondono facilmente perché allineano tutte gli elementi figli flex:
align-content— allinea le righe come gruppo sull'asse trasversale. Richiede wrapping e più righe.align-items— allinea gli elementi all'interno di una singola riga sull'asse trasversale. Funziona anche con una sola riga.justify-content— allinea gli elementi lungo l'asse principale (la direzione in cui scorrono gli elementi).
Per una guida più approfondita su come queste proprietà si integrano tra loro, consulta La guida definitiva a Flexbox.
Supporto dei browser
align-content è supportata in tutti i browser moderni — Chrome, Firefox, Safari, Edge e Opera. Fa parte della specifica Flexbox stabile, quindi non sono necessari prefissi vendor per le versioni attuali.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| stretch | Gli elementi vengono estesi per riempire il contenitore. Questo è il valore predefinito della proprietà. | Provalo » |
| center | Gli elementi sono posizionati al centro del contenitore. | Provalo » |
| flex-start | Gli elementi sono posizionati all'inizio del contenitore. | Provalo » |
| flex-end | Gli elementi sono posizionati alla fine del contenitore. | Provalo » |
| space-between | Distribuisce lo spazio uniformemente tra le righe flex. | Provalo » |
| space-around | Gli elementi sono distribuiti con spazio uguale tra di loro. | Provalo » |
| space-evenly | Distribuisce gli elementi con spazio uguale tra di loro, nonché prima del primo e dopo l'ultimo elemento. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |