Flexbox - Allinea contenuto
Nel caso in cui il contenitore flessibile abbia più righe (quando, flex-wrap: wrap), la proprietà align-content definisce l'allineamento di ogni riga all'interno del contenitore.
Usage -
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Questa proprietà accetta i seguenti valori:
stretch - Le linee nel contenuto si allungheranno per riempire lo spazio rimanente.
flex-start - Tutte le righe del contenuto vengono impacchettate all'inizio del contenitore.
flex-end - Tutte le righe nel contenuto sono imballate alla fine del contenitore.
center - Tutte le righe nel contenuto sono imballate al centro del contenitore.
space-between - Lo spazio extra viene distribuito tra le linee in modo uniforme.
space-around - Lo spazio extra viene distribuito tra le righe in modo uniforme con lo stesso spazio attorno a ciascuna riga (comprese la prima e l'ultima riga)
centro
Passando questo valore alla proprietà align-content, tutte le linee sono imballate al centro del container.
L'esempio seguente mostra il risultato del passaggio del valore center al align-content proprietà.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:43%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:center;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Produrrà il seguente risultato:
inizio flessibile
Passando questo valore alla proprietà align-content, tutte le linee vengono imballate all'inizio del container.
L'esempio seguente mostra il risultato del passaggio del valore flex-start al align-content proprietà.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Produrrà il seguente risultato:
estremità flessibile
Passando questo valore alla proprietà align-content, tutte le linee vengono imballate alla fine del container.
L'esempio seguente mostra il risultato del passaggio del valore flex-end al align-content proprietà.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:flex-end;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Produrrà il seguente risultato:
allungare
Passando questo valore alla proprietà align-content, le linee si allungheranno per riempire lo spazio rimanente.
L'esempio seguente mostra il risultato del passaggio del valore stretch al align-content proprietà.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:stretch;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Produrrà il seguente risultato:
spazio intorno
Passando questo valore alla proprietà align-content, lo spazio extra viene distribuito tra le righe in modo uniforme con lo stesso spazio attorno a ciascuna riga (comprese la prima e l'ultima riga).
L'esempio seguente mostra il risultato del passaggio del valore space-around al align-content proprietà.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:space-around;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Produrrà il seguente risultato:
spazio tra
Passando questo valore alla proprietà align-content, lo spazio extra viene distribuito tra le righe in modo uniforme, dove la prima riga sarà in alto e l'ultima riga sarà in fondo al contenitore.
L'esempio seguente mostra il risultato del passaggio del valore space-between al align-content proprietà.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:space-between;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Produrrà il seguente risultato: