Risorse sul web
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Il modulo CSS Flexbox layout, chiamata anche semplicemente Flexbox, è un nuovo standard che aggiorna la CSS Flexible Box Layout.
Si tratta di un layout unidimensionale, sta indicare che, gestisce il layout una dimensione per volta, le righe distintamente dalle colonne. Un modello differente, bidimensionale, è CSS Grid Layout che controlla colonne e righe contemporaneamente.
Il layout unidimensionale, come anticipato, gestisce una dimensione per volta.
Per comprendere il funzionamento di questo layout bisogna capire come esso lavora.
Flexbox lavora su due assi: l'asse principale, detto "main axis" e l'asse trasversale, detto "cross axis".
Il primo viene da noi indicato attraverso la proprietà flex-direction, il secondo è assegnato automaticamente ed è conseguenziale alla nostra scelta. Il "cross axis" sarà sempre l'asse perpendicolare al "main axis".
La logica costruttiva di un Flexbox layout è sempre la stessa, avremo proprietà da applicare al box contenitore e proprietà da applicare agli elementi contenuti.
<div class="container"> <p id="uno">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p id="due">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p id="tre">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div>
| display | con valore "flex" attiva il layout flexbox |
| flex-direction | definiamo la direzione degli elementi, ovvero il "main axis" e conseguenzialmente il "cross axis"; il valore di default è row |
| align-items | definiamo la disposizione lungo l'asse perpendicolare "cross-axis" |
| justify-content | definiamo la disposizione lungo l'asse principale "main-axis" |
| flex-wrap | suddivide gli elementi su più righe quando troppo grandi per essere visualizzati su una riga |
| flex-flow | shorthand: il primo valore flex-direction, il seocndo flex-wrap |
Per attivare il layout flexbox dovremo applicare la proprietà display: flex ed i figli diretti di quel contenitore diventano oggetti flessibili.
Valore possibili:
| flex | attiva layout flexbox per tutti gli elementi contenuti; il container si comporta come un elemento di tipo block. |
| inline-flex | attiva layout flexbox per tutti gli elementi contenuti; il container si comporta come un elemento di tipo inline. |
Flex e inline-flex entrambi i valori applicano il layout flessibile agli elementi contenuti.
Con flex il contenitore si comporta come un elemento a livello di blocco, quindi non affiancabile, mentre, con inline-flex il contenitore si comporta come un elemento inline, quindi affiancabile.
.container {
display: flex;
}
La proprietà flex-direction definisce il "main axis" e conseguenzialmente il "cross axis".
Valori possibili:
| row | il "main axis" scorrerà lungo la riga |
| row-reverse | il "main axis" scorrerà lungo la riga in ordine invertito |
| column | il "main axis" scorrerà parte superiore della pagina verso il basso incolonnato |
| column-reverse | il "main axis" scorrerà parte superiore della pagina verso il basso incolonnato in ordine inverito |
La scelta della direzione del "main axis" determina la direzione del "cross axis" che sarà sempre perpendicolare all'asse principale.
.container {
display: flex;
flex-direction: row;
}
Risorse sul web
https://css-tricks.com/almanac/properties/a/align-items/
La proprietà align-items definisce la disposizione degli elementi lungo l' asse trasversale/perpendicolare "cross-axis".
Abbiamo detto che la definizione del "main axis", genera l'asse "cross-axis". Se il "main-axis" è impostato su row (riga), il "cross-axis" sarà dall'alto-verso-il-basso, mentre, se il "main-axis" è impostato su column (colonna), il "cross-axis" sarà da sinistra-a-destra.
L'ancoraggio iniziale lungo l'asse "cross-axis" è detto "cross-start", mentre, l'ancoraggio finale è detto "cross-end".
Possiamo gestire la disposizione degli elementi, lungo il "cross-axis" mediante la proprietà align-items.
Valori possibili:
| flex-start | ancora gli elementi dalla parte iniziale |
| flex-end | ancora gli elementi dalla parte finale |
| center | posiziona centralmente gli elementi |
| baseline | gli elementi sono allineati come sono allineate le loro linee di base |
| stretch | distendi/allunga per riempire il contenitore |
flex-startflex-endcenterbaselinestretch.container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
La proprietà justify-content definisce la disposizione degli elementi lungo l' principale "main-axis".
Come accadeva per il "cross-axis" anche per il "main-axis" gli elementi inseriti in una riga, come comportamento predefinito, sono disposti da sinistra-a-destra, mentre, gli elementi inseriti in una colonna vengono disposti dall'altro-verso-il-basso.
L'ancoraggio iniziale lungo l'asse "main-axis" è detto "main-start", mentre, l'ancoraggio finale è detto "main-end".
Valori possibili:
flex-start | ancora all'inizio gli elementi |
flex-end | ancora alla fine degli elementi |
center | centra gli elementi |
space-around | spazio attorno agli elementi |
space-between | spazio tra gli elementi |
space-evenly | distribuisci spazio uniformemente |
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
La proprietà flex-wrap definisce il comportamento nell'eventualità che elementi contenuti su una riga siano troppo grandi per essere visualizzati tutti in una solo riga ed andranno a capo.
L'esempio più frequente e quando ci ritroviamo di fronte ad un contenitore con larghezza fissa e gli elementi contenuti siano più larghi di quest'ultimo.
Proprietà possibili:
| no-wrap | Gli articoli flessibili non si suddividono in più righe |
| wrap | Gli articoli flessibili si suddividono in più righe |
| wrap-reverse | Gli articoli flessibili si suddividono in più righe; cross-start e cross-end sono invertiti |
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
La proprietà flex-flow è una shorthand che fonde le proprietà flex-direction e flex-wrap in una sintassi abbreviata.
Il primo valore indica il valore della priprietà flex-direction, il secondo valore indica il valore della proprietà flex-wrap.
.container {
flex-flow: row wrap;
}
Prima di poter parlare delle proprietà applicabili agli elementi contenuti dobbiamo considerare il concetto di spazio disponibile.
Come mostrato dall'immagini sovrastante, il valore dello spazio disponibile vuoto è dato dalla larghezza del container meno lo spazio occupato dagli elementi in esso contenuti.
Gli elementi contenuti possono avere una base/larghezza precisamente fissata (es. width: 100px) o può essere automaticamente definita dallo spazio necessario all'elemento per essere visualizzato contenuto correttamente.
Là dove disponibile lo spazio vuoto può essere gestito applicando box-per-box le seguenti proprietà:
| flex-basis | imposta base dell'elemento |
| flex-grow | imposta il fattore di crescita flessibile regolando l'occupazione dello spazio disponibile vuoto |
| flex-shrink | imposta il fattore di contrazione flessibile regolando l'occupazione dello spazio quando non c'è abbastanza spazio sulla riga. |
| flex | shorthand |
La proprietà flex-basis definisce la dimensione di un'oggetto in termini di spazio occupato.
Tutti gli elementi possono avere una dimensione fissa (es. width: 100px); qualora un elemento non abbia una dimensione fissata, la dimensione del elemento è lo spazio necessario per visualizzare il loro contenuto.
Valori possibili:
| auto | recupera la dimensione fissata o necessaria all'elemento |
| valore | possiamo indicare una dimensione (es. 200px o 20%) |
| min-content max-content fit-content | regolano i dimensionamento automatico (minimo necessario, massimo/giusto necessario e ottimizza il contenuto) |
#uno{
flex-basis: 150px;
}
Impostando una dimensione maggiorata all'elemento, se possibile e se disponibile dello spazio-vuoto, l'elemento occuperà maggiore spazio.
Note: Se impostiamo flex-direction:row, flex-basis farà riferimento alla dimensione width, mentre, se impostiamo felx-direction:column, felx-basis farà riferimento alla dimensione height.
La proprietà flex-grow imposta il fattore di crescita flessibile quando è disponibile dello spazio vuoto nel container.
La proprietà accetta semplici valori numerici positivi partendo da 0 che è il valore di default/standard e che non applica nessuna variazione.
Impostando ad un elemento il valore 1 indichiamo di dimensionarlo in modo da occupare maggiore spazio, includendo lo spazio disponibile vuoto, rispetto agli altri elementi.
La stessa proprietà può essere aggiunta agli altri elementi per suddividere lo spazio disponibile; maggiore sarà il valore maggiore sarà proporzionalmente lo spazio occupato dall'elemento.
Lo spazio libero disponibile sarà sempre suddiviso tra gli elementi ma non sovrasterà mai la dimensione flex-basis minima di ogni elemento.
#uno{
flex-grow: 2;
}
#due{
flex-grow: 1;
}
#tre{
flex-grow: 2;
}
La proprietà flex-shrink imposta il fattore di contrazione flessibile che regola di quanto si ridurrà l'elemento rispetto agli altri elementi quando non c'è abbastanza spazio per tutti sulla riga del container.
Con la proprietà flex-shirik possiamo indicare l'elemento da contrarre maggiormente.
.container{
width: 200px;
}
#uno{
width:100px;
}
#due{
width:100px;
}
#tre{
width:100px;
flex-shrik: 5;
}
La proprietà flex è una shorthand ovvero una proprietà di sintassi abbreviata. In un unica proprietà possiamo indicare, in ordine, i valori di flex-grow, flex-shrink e flex-basis.
/* un valore numerico farà riferimento a flex-grow */
#uno{
flex: 1;
}
/* un valore numerico indicante unità di misura farà riferimento a flex-basis */
#uno{
flex: 100px;
}
/* due valori faranno riferimento a flex-grow e flex-basis */
#uno{
flex: 1 100px;
}
/* tre valori faranno riferimento a flex-grow, flex-shrink e flex-basis */
#uno{
flex: 1 2 10%;
}