Podcast su CSS - 010: Flexbox
Un pattern di progettazione che può essere difficoltoso nel Responsive Web Design è la barra laterale incorporata ad alcuni contenuti. Questo modello funziona molto bene nel caso dell'area visibile, ma quando lo spazio è condensato, il layout rigido può diventare problematico.
Il Modello di layout flessibile (flexbox) è un modello di layout progettato per contenuti unidimensionali. È particolarmente efficace nel selezionare una serie di articoli di dimensioni diverse e restituire il layout migliore per questi elementi.
È il modello di layout ideale per questo pattern della barra laterale. Flexbox non solo consente di disporre la barra laterale e i contenuti in linea, ma se non c'è abbastanza spazio, la barra laterale si sposta in una nuova riga. Invece di impostare dimensioni rigide da seguire per il browser, con flexbox, puoi fornire limiti flessibili per suggerire come potrebbero essere visualizzati i contenuti.
Che cosa puoi fare con un layout flessibile?
I layout flessibili hanno le seguenti funzionalità, che potrai esplorare in questa guida.
- Possono essere visualizzati come riga o colonna.
- Rispettano la modalità di scrittura del documento.
- Per impostazione predefinita sono costituite da una sola riga, ma è possibile aggregarli su più righe.
- Gli elementi nel layout possono essere riordinati visivamente, lontano dal loro ordine nel DOM.
- È possibile distribuire lo spazio all'interno degli elementi, in modo da ridurli sempre più in base allo spazio disponibile nell'elemento padre.
- Lo spazio può essere distribuito intorno agli elementi e alle linee flessibili in un layout a capo, utilizzando le proprietà Allineamento riquadro.
- Gli elementi stessi possono essere allineati sull'asse trasversale.
L'asse principale e l'asse trasversale
La chiave per comprendere flexbox è comprendere il concetto di asse principale e di asse incrociato.
L'asse principale è quello impostato dalla tua proprietà flex-direction
.
Se è row
, l'asse principale è lungo la riga,
se è column
, l'asse principale è lungo la colonna.
Gli elementi flessibili si spostano come gruppo sull'asse principale. Ricorda: abbiamo molte cose e stiamo cercando di ottenere il layout migliore per loro come gruppo.
L'asse trasversale corre nell'altra direzione rispetto all'asse principale,
quindi, se flex-direction
è row
, l'asse incrociato corre lungo la colonna.
Puoi eseguire due operazioni sull'asse trasversale.
Puoi spostare gli elementi singolarmente o in gruppo in modo che siano allineati tra loro e con il contenitore flessibile. Inoltre, se hai linee flessibili aggregate, puoi
trattarle come un gruppo per controllare l'assegnazione dello spazio a queste linee.
In questa guida scoprirai come funziona in pratica. Per il momento tieni presente che l'asse principale segue flex-direction
.
Creazione di un container flessibile
Vediamo come si comporta Flexbox prendendo un gruppo di elementi di dimensioni diverse e utilizzando flexbox per disporli.
<div class="container" id="container">
<div>One</div>
<div>Item two</div>
<div>The item we will refer to as three</div>
</div>
Per usare Flexbox, devi dichiarare che vuoi usare un contesto di formattazione flessibile e non un layout standard e in blocco.
Per farlo, modifica il valore della proprietà display
in flex
.
.container {
display: flex;
}
Come hai appreso nella guida al layout, otterrai una casella a livello di blocco, con elementi secondari flessibili. Gli elementi flessibili iniziano immediatamente a mostrare un determinato comportamento flexbox, utilizzando i relativi valori iniziali.
I valori iniziali indicano che:
- Gli elementi vengono visualizzati come una riga.
- Non vanno a capo.
- Non crescono fino a riempire il contenitore.
- Questi elementi vengono allineati all'inizio del container.
Controllo della direzione degli elementi
Anche se non hai ancora aggiunto una proprietà flex-direction
, gli elementi vengono visualizzati come riga perché il valore iniziale di flex-direction
è row
.
Se vuoi una riga, non è necessario aggiungere la proprietà.
Per modificare la direzione, aggiungi la proprietà e uno dei quattro valori:
row
: gli elementi sono disposti in una riga.row-reverse:
gli elementi sono disposti come una riga dall'estremità del contenitore flessibile.column
: gli elementi sono disposti come una colonna.column-reverse
: gli elementi sono disposti come una colonna dall'estremità del contenitore flessibile.
Puoi provare tutti i valori utilizzando il gruppo di elementi della demo di seguito.
Invertire il flusso degli elementi e dell'accessibilità
Devi essere prudente quando utilizzi proprietà che riordinano la visualizzazione visiva
lontano dall'ordine degli elementi nel documento HTML,
poiché possono influire negativamente sull'accessibilità.
I valori row-reverse
e column-reverse
sono un buon esempio.
Il riordinamento avviene solo per l'ordine visivo, non per l'ordine logico.
È importante capire questo aspetto perché l'ordine logico è l'ordine in cui uno screen reader leggerà i contenuti, dopodiché chiunque naviga utilizzando la tastiera.
Nel seguente video puoi vedere come, in un layout a riga invertita, il passaggio da un link all'altro si disconnette mentre la navigazione da tastiera segue il DOM e non la visualizzazione visiva.
Qualsiasi elemento che possa modificare l'ordine degli elementi in flexbox o griglia può causare questo problema. Pertanto, qualsiasi riordinamento deve includere test approfonditi per verificare che non rendano difficile l'utilizzo del tuo sito per alcune persone.
Per ulteriori informazioni, vedi:
Modalità e direzione di scrittura
Gli elementi flessibili vengono disposti come riga per impostazione predefinita. Una riga viene eseguita nella direzione in cui le frasi vanno nella modalità di scrittura e nella direzione dello script. Ciò significa che se lavori in arabo, la cui direzione dello script è da destra a sinistra (rtl), gli elementi verranno allineati a destra. L'ordine delle schede inizierà a destra, poiché questo è il modo in cui le frasi vengono lette in arabo.
Se lavori con una modalità di scrittura verticale, come alcuni caratteri giapponesi, una riga verrà eseguita in verticale, dall'alto verso il basso.
In questa demo, prova a cambiare flex-direction
, che utilizza una modalità di scrittura verticale.
Di conseguenza, il comportamento degli elementi flessibili per impostazione predefinita è collegato alla modalità di scrittura del documento. Quasi tutti i tutorial sono scritti in inglese o in un'altra modalità di scrittura orizzontale, da sinistra a destra. In questo modo si suppone facilmente che gli elementi flessibili vengano allineati a sinistra e vengano eseguiti orizzontalmente.
Considerando gli assi principale e trasversale, oltre alla modalità di scrittura da considerare, il fatto che in flexbox parliamo di start e end anziché di top, bottom, left e rightbox potrebbe essere più comprensibile. Ogni asse ha un inizio e una fine. L'inizio dell'asse principale è denominato avvio-principale. Quindi i nostri elementi flessibili inizialmente sono allineati dal principale. La fine di questo asse è main-end. L'inizio della croce è cross-start e la fine cross-end.
Aggregazione di elementi flessibili
Il valore iniziale della proprietà flex-wrap
è nowrap
.
Ciò significa che se non c'è abbastanza spazio nel contenitore, gli elementi supereranno l'elenco.
Gli elementi visualizzati utilizzando i valori iniziali verranno ridotti al minimo,
fino alle dimensioni min-content
prima che si verifichi l'overflow.
Per completare il wrapping degli elementi, aggiungi flex-wrap: wrap
al contenitore flessibile.
.container {
display: flex;
flex-wrap: wrap;
}
Quando un contenitore flessibile viene a capo, crea più linee flessibili. In termini di distribuzione dello spazio, ogni riga funge da nuovo container flessibile. Pertanto, se stai eseguendo il wrapping di righe, non è possibile ottenere un elemento nella riga 2 da allineare con un elemento superiore nella riga 1. Questo è ciò che significa che gli annunci flexbox sono unidimensionali. Puoi controllare l'allineamento in un asse, in una riga o in una colonna, non in entrambi insieme come possiamo fare con la griglia.
La forma abbreviata "flex-flow"
Puoi impostare le proprietà flex-direction
e flex-wrap
utilizzando la forma abbreviata flex-flow
.
Ad esempio, per impostare flex-direction
su column
e consentire l'aggregazione degli elementi:
.container {
display: flex;
flex-flow: column wrap;
}
Controllo dello spazio all'interno degli elementi flessibili
Se il contenitore ha più spazio di quello necessario per visualizzare gli elementi, questi vengono visualizzati all'inizio e non crescono fino a occupare lo spazio.
e smettono di crescere raggiungendo le dimensioni massime dei contenuti.
Questo perché il valore iniziale delle proprietà flex-
è:
flex-grow: 0
: gli elementi non ingrandiscono.flex-shrink: 1
: gli elementi possono ridurre le dimensioni diflex-basis
.flex-basis: auto
: gli elementi hanno una dimensione di base pari aauto
.
Può essere rappresentato da un valore della parola chiave pari a flex: initial
.
La proprietà abbreviata flex
o i comandi lunghi di flex-grow
, flex-shrink
e flex-basis
vengono applicati agli elementi secondari del
contenitore flessibile.
Per far crescere gli elementi, lasciando più spazio a quelli di grandi dimensioni rispetto a quelli più piccoli, utilizza flex:auto
.
Puoi provare questa procedura utilizzando la demo in alto.
In questo modo le proprietà vengono impostate su:
flex-grow: 1
: gli elementi possono superare le dimensioni diflex-basis
.flex-shrink: 1
: gli elementi possono ridurre le dimensioni diflex-basis
.flex-basis: auto
: gli elementi hanno una dimensione di base pari aauto
.
Se usi flex: auto
, gli elementi avranno dimensioni diverse,
poiché lo spazio condiviso tra loro viene condiviso dopo che ogni elemento è stato definito come
dimensione massima dei contenuti.
In questo modo, gli oggetti di grandi dimensioni occupano più spazio.
Per forzare tutti gli elementi a avere una dimensione coerente e ignorare la dimensione della modifica dei contenuti
flex:auto
in flex: 1
nella demo.
Questo si decomprime in:
flex-grow: 1
: gli elementi possono superare le dimensioni diflex-basis
.flex-shrink: 1
: gli elementi possono ridurre le dimensioni diflex-basis
.flex-basis: 0
: gli elementi hanno una dimensione di base pari a0
.
L'uso di flex: 1
indica che tutti gli elementi hanno dimensioni pari a zero,
quindi tutto lo spazio nel container flessibile è disponibile per essere distribuito.
Poiché tutti gli elementi hanno un fattore flex-grow
di 1
, crescono tutti allo stesso modo e lo spazio viene condiviso equamente.
Consentire agli articoli di crescere a ritmi diversi
Non è necessario assegnare a tutti gli elementi un fattore flex-grow
pari a 1
.
Potresti assegnare diversi fattori flex-grow
agli articoli flessibili.
Nella demo sotto, il primo elemento ha flex: 1
, il secondo flex: 2
e il terzo flex: 3
.
Man mano che questi elementi aumentano da 0
, lo spazio disponibile nel contenitore flessibile viene condiviso in sei.
Una parte viene assegnata al primo elemento,
due parti alla seconda e
tre parti alla terza.
Puoi fare la stessa cosa da un flex-basis
di auto
, ma dovrai specificare i tre
valori.
Il primo valore è flex-grow
, il secondo flex-shrink
e il terzo flex-basis
.
.item1 {
flex: 1 1 auto;
}
.item2 {
flex: 2 1 auto;
}
Si tratta di un caso d'uso meno comune, in quanto il motivo per utilizzare flex-basis
di auto
è consentire al browser di capire la distribuzione dello spazio.
Se vuoi che un elemento cresca un po' di più rispetto a quanto decide l'algoritmo, ma potrebbe essere utile.
Riordinamento degli elementi flessibili
Gli elementi nel contenitore flessibile possono essere riordinati utilizzando la proprietà order
.
Questa proprietà consente di ordinare gli articoli nei gruppi ordinali.
Gli elementi sono disposti nella direzione dettata da flex-direction
,
prima i valori più bassi.
Se più elementi hanno lo stesso valore, verranno visualizzati insieme agli altri con quel valore.
L'esempio seguente mostra questo ordine.
Verifica la tua comprensione
Verifica le tue conoscenze su Flexbox
Il valore predefinito di flex-direction
è
row
column
Per impostazione predefinita, un container flessibile esegue il wrapping degli elementi secondari.
flex-wrap: wrap
con display: flex
per inserire il codice per i bambiniUn elemento secondario flessibile sembra essere schiacciato. Quale proprietà flessibile aiuta a mitigare questo problema?
flex-grow
flex-shrink
flex-basis
Panoramica dell'allineamento Flexbox
Flexbox portava con sé un insieme di proprietà per allineare gli elementi e distribuire lo spazio tra gli stessi. Queste proprietà sono state così utili da essere state spostate nelle rispettive specifiche, che puoi trovarle anche nel layout griglia. Qui puoi scoprire come funzionano quando utilizzi flexbox.
L'insieme di proprietà può essere inserito in due gruppi. Proprietà per la distribuzione dello spazio e proprietà per l'allineamento. Le proprietà che distribuiscono lo spazio sono:
justify-content
: distribuzione dello spazio sull'asse principale.align-content
: distribuzione dello spazio sull'asse trasversale.place-content
: un modo rapido per impostare entrambe le proprietà precedenti.
Proprietà utilizzate per l'allineamento in flexbox:
align-self
: allinea un singolo elemento sull'asse trasversale.align-items
: allinea tutti gli elementi come gruppo sull'asse trasversale.
Se stai lavorando sull'asse principale, le proprietà iniziano con justify-
.
Sulla croce, iniziano con align-
.
Distribuzione dello spazio sull'asse principale
Con l'HTML utilizzato in precedenza, gli elementi flessibili sono disposti come una riga, quindi c'è spazio sull'asse principale.
Gli elementi non sono abbastanza grandi da riempire completamente il contenitore flessibile.
Gli elementi vengono visualizzati all'inizio del contenitore flessibile perché il valore iniziale di justify-content
è flex-start
.
Gli elementi vengono allineati all'inizio e c'è spazio aggiuntivo alla fine.
Aggiungi la proprietà justify-content
al contenitore flessibile e assegnale un valore pari a flex-end
: gli elementi verranno mostrati alla fine del contenitore e lo spazio libero verrà posizionato all'inizio.
.container {
display: flex;
justify-content: flex-end;
}
Puoi anche distribuire lo spazio tra gli elementi con justify-content: space-between
.
Prova alcuni dei valori nella demo e consulta MDN per l'insieme completo dei valori possibili.
Con flex-direction: column
Se hai modificato flex-direction
in column
, allora justify-content
funzionerà
sulla colonna.
Per avere spazio libero nel contenitore quando lavori come colonna, devi assegnare un valore height
o block-size
al contenitore.
In caso contrario, non avrai spazio libero da distribuire.
Prova i diversi valori, questa volta con un layout colonna flexbox.
Distribuzione dello spazio tra le linee flessibili
Con un contenitore flessibile aggregato, potresti avere spazio da distribuire sull'asse trasversale.
In questo caso, puoi utilizzare la proprietà align-content
con gli stessi valori di justify-content
.
A differenza di justify-content
, che allinea gli elementi a flex-start
per impostazione predefinita, il valore iniziale di align-content
è stretch
.
Aggiungi la proprietà align-content
al contenitore flessibile per modificare questo comportamento predefinito.
.container {
align-content: center;
}
Prova questa procedura nella demo.
L'esempio presenta righe aggregate di elementi flessibili
e il container ha un block-size
per liberare spazio.
L'abbreviazione di place-content
Per impostare sia justify-content
sia align-content
puoi utilizzare place-content
con uno
o due valori.
Se specifichi che sia il primo per align-content
sia il secondo per justify-content
, verrà utilizzato un singolo valore per entrambi gli assi.
.container {
place-content: space-between;
/* sets both to space-between */
}
.container {
place-content: center flex-end;
/* wrapped lines on the cross axis are centered,
on the main axis items are aligned to the end of the flex container */
}
Allineare gli elementi sull'asse trasversale
Sulla linea trasversale puoi anche allineare gli elementi all'interno della linea flessibile utilizzando align-items
e align-self
.
Lo spazio disponibile per questo allineamento dipende dall'altezza del contenitore flessibile o dalla linea flessibile nel caso di un insieme di elementi aggregati.
Il valore iniziale di align-self
è stretch
, motivo per cui gli elementi flessibili in una riga si estendono all'altezza dell'elemento più alto per impostazione predefinita.
Per modificare questa impostazione, aggiungi la proprietà align-self
a tutti gli elementi flessibili.
.container {
display: flex;
}
.item1 {
align-self: flex-start;
}
Utilizza uno qualsiasi dei seguenti valori per allineare l'elemento:
flex-start
flex-end
center
stretch
baseline
Consulta l'elenco completo dei valori su MDN.
La demo successiva ha una singola riga di elementi flessibili con flex-direction: row
.
L'ultimo elemento definisce l'altezza del contenitore flessibile.
Il primo elemento ha la proprietà align-self
con valore flex-start
.
Prova a modificare il valore di quella proprietà per vedere come si sposta all'interno del relativo spazio sull'asse trasversale.
La proprietà align-self
viene applicata ai singoli elementi.
La proprietà align-items
può essere applicata al contenitore flessibile
per impostare tutte le singole proprietà align-self
come gruppo.
.container {
display: flex;
align-items: flex-start;
}
Nella prossima demo prova a modificare il valore di align-items
per allineare tutti gli elementi sull'asse incrociato come gruppo.
Perché non c'è "giustificazione" in flexbox?
Gli elementi flessibili fungono da gruppo sull'asse principale. Quindi non esiste il concetto di suddivisione di un singolo elemento da quel gruppo.
Nel layout a griglia, le proprietà justify-self
e justify-items
operano sugli assi in linea per eseguire l'allineamento degli elementi su quell'asse all'interno dell'area della griglia.
A causa del modo in cui i layout flessibili trattano gli elementi come un gruppo, queste proprietà non sono implementate in un contesto flessibile.
È importante sapere che Flexbox funziona molto bene con i margini automatici.
Se hai la necessità di suddividere un elemento da un gruppo o il gruppo in due gruppi, puoi applicare un margine.
Nell'esempio riportato di seguito, l'ultimo elemento ha un margine sinistro di auto
.
Il margine automatico assorbe tutto lo spazio nella direzione in cui viene applicato.
Ciò significa che l'elemento viene spostato a destra e i gruppi vengono suddivisi.
Come centrare un elemento verticalmente e orizzontalmente
Le proprietà di allineamento possono essere utilizzate per centrare un elemento all'interno di un'altra casella.
La proprietà justify-content
allinea l'elemento sull'asse principale,
ovvero la riga. La proprietà align-items
sull'asse incrociato.
.container {
width: 400px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
Verifica la tua comprensione
Verifica le tue conoscenze su Flexbox
.container { display: flex; direction: ltr; }
Per allineare verticalmente con flexbox, utilizza
.container { display: flex; direction: ltr; }
Per allineare orizzontalmente con flexbox, utilizza
.container { display: flex; direction: ltr; }
Per impostazione predefinita, gli elementi flessibili sono allineati a stretch
. Se vuoi che le dimensioni dei contenuti vengano utilizzate per gli elementi secondari, quale dei seguenti stili useresti?
justify-content: flex-start
align-content: start
content
allinea le linee flessibili, non l'allineamento dell'elemento secondario.height: auto
align-items: flex-start
Risorse
- Layout casella flessibile MDN CSS include una serie di guide dettagliate con esempi.
- Guida ai trucchi per CSS: Flexbox
- Cosa succede quando crei un container Flexbox Flex
- Tutto ciò che occorre sapere sull'allineamento in Flexbox
- Quanto è grande la scatola flessibile?
- Casi d'uso di Flexbox
- Esaminare ed eseguire il debug dei layout CSS Flexbox in Chrome DevTools