align-content (proprietà CSS) specifica l’allineamento dell’elemento all’interno di un contenitore “flessibile”, nel caso in cui non occupi tutto lo spazio disponibile.
Sintassi
align-content: valore;
| valore | descrizione |
|---|---|
| center | Allinea il contenuto al centro del contenitore |
| flex-end | Allinea il contenuto alla fine del contenitore |
| flex-start | Allinea il contenuto all’inizio del contenitore |
| initial | Allinea il contenuto secondo i valori di default della proprietà (nella specie, stretch) |
| inherit | Allinea il contenuto ereditandone la relativa proprietà dall’elemento padre |
| space-around | Allinea il contenuto con distribuzione uniforme nel contenitore con spazi su entrambe le estremità |
| space-between | Allinea il contenuto con distribuzione uniforme nel contenitore |
| stretch | Allinea il contenuto occupando l’eventuale spazio rimanente del contenitore |
Esempi
<style>
#contenitore {
align-content: center;
display: flex;
flex-wrap: wrap;
border: 1px solid black;
width: 300px;
height: 900px;
}
.contenuto {
background-color: yellow;
border: 1px solid black;
width: 300px;
height: 200px;
}
</style>
<div id="contenitore">
<div class="contenuto">Contenuto1</div>
<div class="contenuto">Contenuto2</div>
<div class="contenuto">Contenuto3</div>
</div>
Contenuto1
Contenuto2
Contenuto3
Contenuti correlati
- CSS
- HTML
- JavaScript
- jQuery
- PHP
- SQL
- WORDPRESS
0 Comment