I Flex item sono gli elementi figli diretti di un Flex container. Una volta che un contenitore viene definito come display:flex, i suoi figli diventano automaticamente dei Flex item e possono essere modificati e disposti utilizzando diverse proprietà specifiche.
Nella lezione precedente, abbiamo visto le proprietà del Flex container.
In questa lezione, vediamo le sei proprietà per i Flex item:
orderflex-growflex-shrinkflex-basisflexalign-selfLa proprietà order controlla l'ordine di visualizzazione dei Flex item all'interno del Flex container.
La proprietà order accetta numeri interi positivi o negativi. Gli elementi con un valore order inferiore vengono visualizzati prima di quelli con un valore superiore. Gli elementi con lo stesso valore di order mantengono l'ordine che avrebbero senza order.
<div class="flex-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<style>
.flex-container {
display: flex;
}
.box1 { order: 2; } /* Secondo posto */
.box2 { order: 1; } /* Primo posto */
.box3 { order: 3; } /* Terzo posto */
</style>La proprietà flex-grow determina quanto un Flex item si deve espandere rispetto agli altri Flex item all'interno dell'elemento che li contiene.
La proprietà flex-grow accetta un numero intero o decimale positivo senza unità, che indica lo spazio che deve occupare l'elemento. Un valore di 0 significa che l'elemento non si espanderà. Un valore di 1 significa che l'elemento si espanderà per riempire lo spazio disponibile, in proporzione agli altri elementi con un valore di flex-grow diverso da zero.
Nota: lo spazio viene calcolato automaticamente in base agli elementi presenti.
Ad esempio, se tutti gli elementi hanno un valore flex-grow:1, occuperanno tutto lo spazio:
.flex-container {
display: flex;
}
.flex-container > div {
flex-grow: 1;
}Ora, invece, assegniamo dei valori diversi per ogni elemento:
<div class="flex-container">
<div class="box1">flex-grow:0</div>
<div class="box2">flex-grow:3</div>
<div class="box3">flex-grow:2</div>
</div>
<style>
.flex-container {
display: flex;
}
.flex-container > div {
border: 1px solid black;
}
.box1 { flex-grow: 0; } /* Occupa solo lo spazio indispensabile */
.box2 { flex-grow: 3; }
.box3 { flex-grow: 2; }
</style>Nell'esempio, ogni elemento ha un valore flex-grow diverso: il primo ha flex-grow:0, ciò significa che utilizzerà soltanto lo spazio necessario per il testo all'interno del <div>, il secondo ha flex-grow:3 e il terzo flex-grow:2, quindi utilizzeranno degli spazi differenti in proporzione al valore e allo spazio rimasto.
Nell'esempio, abbiamo anche utilizzato un selettore combinato (flex-container>div) per aggiungere un bordo agli elementi e rendere visibile la differenza di flex-grow.
La proprietà flex-shrink specifica quanto un Flex item deve ridursi rispetto agli altri elementi quando lo spazio disponibile diminuisce.
La proprietà flex-shrink accetta un numero intero o decimale positivo senza unità, che indica il fattore di riduzione dell'elemento. Un valore di 0 significa che l'elemento non si ridurrà mai, mentre un valore di 1 o superiore specifica la proporzione di riduzione rispetto agli altri elementi. Di default, tutti gli elementi hanno un valore di flex-shrink pari a 1.
<div class="flex-container">
<div class="box1">flex-shrink:1</div>
<div class="box2">flex-shrink:2</div>
<div class="box3">flex-shrink:1</div>
<div class="box4">flex-shrink:1</div>
</div>
<style>
.flex-container {
display: flex;
}
.flex-container > div {
border: 1px solid black;
width: 100%;
}
.box1 { flex-shrink: 1; }
.box2 { flex-shrink: 2; }
.box3 { flex-shrink: 1; }
.box4 { flex-shrink: 1; }
</style>La proprietà flex-basis definisce la dimensione iniziale di un Flex item, prima che vengano applicate le proprietà flex-grow e flex-shrink.
Di default, la proprietà flex-basis è auto, quindi viene utilizzato il valore di height e width specificato per la dimensione dell'elemento.
La proprietà flex-basis accetta un qualsiasi valore che abbia un'unità di misura della lunghezza, come px o em.
<div class="flex-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">flex-basis:200px</div>
<div class="box4">4</div>
</div>
<style>
.flex-container {
display: flex;
}
.flex-container > div {
border: 1px solid black;
}
.box3 { flex-basis:200px; }
</style>La proprietà flex è una proprietà che combina flex-grow, flex-shrink e flex-basis in un'unica dichiarazione.
La sintassi è: flex: flex-grow flex-shrink flex-basis
Vediamo qualche esempio:
/* flex-grow: 0, flex-shrink: 1, flex-basis: 200px */
flex: 0 1 200px;
/* flex-grow: 1, flex-shrink: 2, flex-basis: auto */
flex: 1 2 auto;Puoi scegliere alcuni valori predefiniti:
none: equivale a 0 0 auto, disabilitando la flessibilità dell'elemento.auto: equivale a 1 1 auto, facendo sì che l'elemento cresca e si riduca in base allo spazio disponibile..flex-container {
display: flex;
}
.flex-container > div {
flex: none; /* Gli elementi non sono flessibili */
}La proprietà align-self consente di modificare l'allineamento di un singolo Flex item lungo l'asse trasversale (ovvero in verticale se gli elementi sono ordinati in orizzontale, oppure in orizzontale se gli elementi sono in verticale), indipendentemente dal valore di align-items impostato sul Flex container, di cui abbiamo parlato nella lezione precedente.
L'elemento accetta cinque valori:
stretch: l'elemento si allunga per riempire il contenitore. È il valore di default..flex-container {
display: flex;
}
.box1 {
align-self: stretch;
}flex-start: l'elemento è allineato all'inizio dell'asse trasversale..flex-container {
display: flex;
}
.box2 {
align-self: flex-start;
}flex-end: l'elemento è allineato alla fine dell'asse trasversale..flex-container {
display: flex;
}
.box2 {
align-self: flex-end;
}center: l'elemento è centrato lungo l'asse trasversale..flex-container {
display: flex;
}
.box2 {
align-self: center;
}baseline: l'elemento è allineato secondo la linea di base del testo. La linea di base del testo è la linea su cui appoggiano le lettere del testo..flex-container {
display: flex;
}
.box2 {
align-self: baseline;
}