Flexbox - Flessibilità
base flessibile
Noi usiamo il flex-basis per definire la dimensione predefinita dell'elemento flessibile prima che lo spazio venga distribuito.
L'esempio seguente mostra l'utilizzo della proprietà flex-basis. Qui stiamo creando 3 scatole colorate e fissando la loro dimensione a 150 px.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-basis:150px; }
.box2{background:blue; flex-basis:150px;}
.box3{background:red; flex-basis:150px;}
.container{
display:flex;
height:100vh;
align-items: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>
</body>
</html>Produrrà il seguente risultato:
flex-grow
Noi usiamo il flex-grow proprietà per impostare il flex-growfattore. In caso di spazio in eccesso nel contenitore, specifica quanto dovrebbe crescere un particolare elemento flessibile.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-grow:10; flex-basis:100px; }
.box2{background:blue; flex-grow:1; flex-basis:100px; }
.box3{background:red; flex-grow:1; flex-basis:100px; }
.container{
display:flex;
height:100vh;
align-items: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>
</body>
</html>Produrrà il seguente risultato:
flessione
Usiamo la proprietà flex-shrink per impostare il flex shrink-factor. Nel caso in cui non ci sia abbastanza spazio nel contenitore, specifica quanto un elemento flessibile deve ridursi.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-basis:200px; flex-shrink:10}
.box2{background:blue; flex-basis:200px; flex-shrink:1}
.box3{background:red; flex-basis:200px; flex-shrink:1}
.container{
display:flex;
height:100vh;
align-items: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>
</body>
</html>Produrrà il seguente risultato:
flettere
C'è una scorciatoia per impostare i valori a tutte queste tre proprietà contemporaneamente; è chiamatoflex. Utilizzando questa proprietà, è possibile impostare i valori su flex-grow, flex-shrink e valori di base flessibile contemporaneamente. Ecco la sintassi di questa proprietà.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}