Flexbox

The CSS Podcast - 010: Flexbox

Un pattern di progettazione che può essere complicato nel reattivo design è una barra laterale che è in linea con contenuti. Dove c'è spazio per l'area visibile, questo schema funziona molto bene, ma dove lo spazio è condensato, questo layout rigido può diventare problematico.

Il modello di layout flessibile (flexbox) è un modello di layout progettato per contenuti unidimensionali. È particolarmente adatto a gestire una serie di elementi di dimensioni diverse e a restituire il layout migliore per questi elementi.

Questo è il modello di layout ideale per questo modello di barra laterale. Flexbox non solo aiuta a posizionare la barra laterale e i contenuti in linea, ma se lo spazio non è sufficiente, la barra laterale si suddividerà in una nuova riga. Invece di impostare dimensioni rigide da seguire per il browser, con flexbox puoi fornire confini flessibili per suggerire come potrebbero essere visualizzati i contenuti.

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.
• Sono a riga singola per impostazione predefinita ma può essere chiesto di spostarsi su più righe.
• Gli elementi nel layout possono essere riordinati visivamente, dall'ordine nel DOM.
• Lo spazio può essere distribuito all'interno degli elementi, in modo che diventino più grandi e più piccoli in base allo spazio disponibile nell'elemento principale.
• Lo spazio può essere distribuito intorno agli elementi e alle linee flessibili in un layout aggregato, usando le proprietà di Allineamento dei riquadri.
• Gli elementi stessi possono essere allineati sull'asse trasversale.

L'asse principale e l'asse trasversale

La chiave per comprendere flexbox è il concetto di asse principale e asse trasversale. L'asse principale è quello impostato dalla proprietà flex-direction. Se è row, il tuo asse principale si trova lungo la riga, Se è column, l'asse principale si trova lungo la colonna.

Gli elementi flessibili si spostano in gruppo sull'asse principale. Ricorda: abbiamo un sacco di elementi e stiamo cercando di trovare il layout migliore per il gruppo.

L'asse trasversale viene eseguito nella direzione opposta rispetto all'asse principale, pertanto se flex-direction è row, l'asse trasversale viene eseguito lungo la colonna.

Nell'asse trasversale puoi eseguire due operazioni. Puoi spostare gli elementi singolarmente o in gruppo, in modo che siano allineati tra loro e si piegano containerizzato. Inoltre, se hai le linee flessibili a capo, puoi trattare queste righe come un gruppo per controllarne l'assegnazione. Vedrai come funziona tutto nella pratica nel corso di questa guida. Per il momento, tieni presente che l'asse principale segue il tuo flex-direction.

Creazione di un contenitore flessibile

Vediamo come si comporta flexbox prendendo un gruppo di elementi di dimensioni diverse e utilizzandolo per la loro impaginazione.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

Per utilizzare flexbox devi dichiarare che vuoi utilizzare un contesto di formattazione flessibile e non regolare a blocchi e in linea. 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 alcuni comportamenti di flexbox, utilizzando i relativi valori iniziali.

I valori iniziali indicano che:

• Gli elementi vengono visualizzati come riga.
• Non si avvolgono.
• Non crescono fino a riempire il contenitore.
• 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 in una riga a partire dalla fine del container flessibile.
• column: gli elementi vengono disposti in una colonna.
• column-reverse: gli elementi vengono disposti in una colonna dalla fine del contenitore flessibile.

Puoi provare tutti i valori utilizzando il nostro gruppo di articoli nella demo di seguito.

Invertire il flusso degli elementi e l'accessibilità

Devi prestare attenzione quando utilizzi proprietà che riordinano la visualizzazione in modo diverso da come sono ordinate nel documento HTML, poiché ciò può influire negativamente sull'accessibilità. I valori row-reverse e column-reverse sono un buon esempio di questo. Il riordinamento avviene solo per l'ordine visivo, non per l'ordine logico. Questo è importante da capire perché l'ordine logico è l'ordine con cui uno screen reader leggerà la lettura ad alta voce. i contenuti, e chiunque usi la tastiera la seguirà.

Nel seguente video puoi vedere come, con un layout a righe invertite, il tasto Tab da un link all'altro si disconnette quando la navigazione da tastiera segue il DOM, non l'immagine display.

Tutto ciò che può modificare l'ordine degli elementi in flexbox o nella griglia può causare questo problema. Pertanto, qualsiasi riordino deve includere test approfonditi per verificare che il tuo sito non sia difficile da usare per alcune persone.

Per ulteriori informazioni, vedi:

• Riordinamento dei contenuti
• Flexbox e navigazione da tastiera si disconnettono

Modalità di scrittura e direzione

Gli elementi flessibili sono disposti come riga per impostazione predefinita. Una riga viene eseguita nella direzione in cui scorrono le frasi nella tua modalità di scrittura e nella direzione dello script. Ciò significa che se lavori in arabo, che ha una direzione dello script da destra a sinistra (RTL), gli elementi verranno allineati a destra. Anche l'ordine delle tabulazioni inizierà a destra, perché è così che vengono lette le frasi in arabo.

Se lavori con una modalità di scrittura verticale, come alcuni caratteri tipografici in giapponese, una riga verrà eseguita in verticale, dall'alto verso il basso. Prova a modificare il flex-direction in questa demo che utilizza una modalità di scrittura verticale.

Pertanto, il comportamento degli elementi flessibili per impostazione predefinita è collegato alla modalità di scrittura del documento. La maggior parte dei tutorial è scritta in inglese o in un'altra modalità di scrittura orizzontale da sinistra verso destra. In questo modo, è facile presumere che gli elementi flessibili siano allineati a sinistra e vengano visualizzati orizzontalmente.

Con l'asse principale e trasversale, oltre alla modalità di scrittura da considerare, il fatto che parliamo di start e end anziché di superiore, inferiore, sinistra e destra in flexbox potrebbe essere più facile da capire. Ogni asse ha un inizio e una fine. L'inizio dell'asse principale è indicato come main-start. Pertanto, gli elementi flessibili vengono inizialmente allineati da main-start. La fine di questo asse è main-end. L'inizio dell'asse trasversale è cross-start e la fine cross-end.

Aggiunta di a capo agli elementi flex

Il valore iniziale della proprietà flex-wrap è nowrap. Ciò significa che se non c'è abbastanza spazio nel container, gli elementi andranno in overflow.

La riduzione degli elementi visualizzati con i valori iniziali verrà ridotta il più possibile fino alla dimensione min-content prima che si verifichi l'overflow.

Per far sì che gli elementi vengano a capo, aggiungi flex-wrap: wrap al contenitore flessibile.

.container {
  display: flex;
  flex-wrap: wrap;
}

Quando un contenitore flessibile viene agganciato, vengono create più linee flessibili. In termini di distribuzione dello spazio, ogni linea si comporta come un nuovo container flessibile. Di conseguenza, se aggreghi le righe, non è possibile ottenere qualcosa nella riga 2 per allinearsi con qualcosa sopra nella riga 1. Questo è il significato di "flexbox è unidimensionale". Puoi controllare l'allineamento in un asse, in una riga o in una colonna, ma non in entrambi, come possiamo fare nella griglia.

La notazione abbreviata per il flusso flessibile

Puoi impostare le proprietà flex-direction e flex-wrap utilizzando la rappresentazione 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

Supponendo che il container abbia più spazio di quello necessario per visualizzare gli elementi, gli elementi vengono allineati all'inizio e non crescono per riempire lo spazio. Smettono di crescere fino alle dimensioni massime dei contenuti. Questo perché il valore iniziale delle proprietà flex- è:

• flex-grow: 0: gli elementi non aumentano.
• flex-shrink: 1: gli articoli possono restringersi più del loro flex-basis.
• flex-basis: auto: gli articoli hanno una dimensione di base di auto.

Può essere rappresentato da un valore di parola chiave pari a flex: initial. La proprietà abbreviata flex, o le mani lunghe di flex-grow, flex-shrink e flex-basis vengono applicate agli elementi secondari dei container flessibile.

Per aumentare le dimensioni degli elementi, mantenendo gli elementi di grandi dimensioni più grandi di quelli piccoli, utilizza flex:auto. Puoi fare una prova usando la demo qui sopra. In questo modo le proprietà vengono impostate su:

• flex-grow: 1: gli elementi possono diventare più grandi del loro flex-basis.
• flex-shrink: 1: gli articoli possono restringersi più del loro flex-basis.
• flex-basis: auto: gli articoli hanno una dimensione di base di auto.

Se utilizzi flex: auto, gli articoli avranno dimensioni diverse, poiché lo spazio condiviso tra gli elementi viene condiviso dopo che ogni elemento è stato disposto dimensioni massime dei contenuti. Pertanto, un elemento di grandi dimensioni occuperà più spazio. Per forzare tutti gli elementi a avere dimensioni coerenti e ignorare le dimensioni dei contenuti, imposta flex:auto su flex: 1 nella demo.

che si separa in:

• flex-grow: 1: gli elementi possono diventare più grandi del loro flex-basis.
• flex-shrink: 1: gli elementi possono restringersi meno del relativo flex-basis.
• flex-basis: 0: gli elementi hanno una dimensione di base pari a 0.

L'uso di flex: 1 indica che la dimensione di tutti gli elementi è pari a zero, pertanto tutto lo spazio nel container flessibile è disponibile per essere distribuito. Poiché tutti gli elementi hanno un fattore di flex-grow pari a 1, crescono tutti in modo uguale e lo spazio viene condiviso in modo uguale.

Consentire la crescita degli articoli a tassi diversi

Non è necessario assegnare a tutti gli elementi un fattore flex-grow di 1. Puoi assegnare fattori flex-grow diversi agli elementi flessibili. Nella demo sotto il primo elemento ha flex: 1, il secondo flex: 2 e il terzo flex: 3. Man mano che questi elementi crescono da 0, lo spazio disponibile nel container flessibile viene condiviso in sei unità. Una parte viene assegnata al primo elemento, da due parti alla seconda, tre parti alla terza.

Puoi fare la stessa cosa da un elemento flex-basis di auto, anche se dovrai specificare i tre e i relativi 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;
}

Questo è un caso d'uso meno comune come motivo per utilizzare flex-basis di auto è consentire al browser di capire la distribuzione dello spazio. Se volessi aumentare la crescita di un elemento un po' più di quanto stabilito dall'algoritmo, tuttavia potrebbe utile.

Riordinare gli elementi flessibili

Gli elementi nel contenitore flessibile possono essere riordinati utilizzando la proprietà order. Questa proprietà consente di ordinare gli elementi in gruppi ordinali. Gli elementi vengono disposti nella direzione dettata da flex-direction, per primi i valori più bassi. Se più elementi hanno lo stesso valore, questo verrà visualizzato con gli altri elementi con lo stesso valore.

L'esempio seguente mostra questo ordinamento.

Verificare di aver compreso

Verifica le tue conoscenze di Flexbox

Panoramica dell'allineamento a Flexbox

Flexbox ha introdotto un insieme di proprietà per allineare gli elementi e distribuire lo spazio tra di essi. Queste proprietà sono state così utili che sono state spostate in una specifica a parte e le troverai anche nel layout a 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 degli spazi sull'asse trasversale.
• place-content: una forma abbreviata per impostare entrambe le proprietà menzionate sopra.

Le 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 lavori sull'asse principale, le proprietà iniziano con justify-. Nell'asse trasversale iniziano con align-.

Distribuzione dello spazio sull'asse principale

Con il codice HTML utilizzato in precedenza, gli elementi flessibili disposti in una riga lasciano spazio sull'asse principale. Gli elementi non sono abbastanza grandi da riempire completamente il contenitore flessibile. Gli elementi vengono visualizzati all'inizio del container flessibile perché il valore iniziale è justify-content è flex-start. Gli elementi vengono allineati all'inizio e l'eventuale spazio aggiuntivo si trova alla fine.

Aggiungi la proprietà justify-content al contenitore flessibile assegna il valore flex-end, gli elementi si allineano alla fine del contenitore e lo spazio libero viene 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 della demo, e visualizza MDN per l'insieme completo valori possibili.

Con flex-direction: column

Se hai modificato flex-direction in column, justify-content funzionerà nella colonna. Per avere spazio libero nel contenitore quando lavori come colonna, devi assegnare al contenitore un height o un block-size. In caso contrario, non avrai spazio libero da distribuire.

Prova i diversi valori, questa volta con un layout delle colonne flexbox.

Distribuzione dello spazio tra le linee flessibili

Con un contenitore flessibile con wrapping 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 il comportamento predefinito.

.container {
  align-content: center;
}

Fai una prova nella demo. L'esempio contiene linee di elementi flessibili, e il container ha un block-size in modo da avere spazio libero.

La grafia abbreviata di place-content

Per impostare sia justify-content che align-content, puoi utilizzare place-content con uno o due valori. Viene utilizzato un singolo valore per entrambi gli assi se specifichi sia il primo che è utilizzato per align-content e il secondo per justify-content.

.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 */
}

Allineamento degli elementi sull'asse trasversale

Nell'asse trasversale puoi anche allineare gli elementi all'interno della riga flessibile utilizzando align-items e align-self. Lo spazio disponibile per questo allineamento dipenderà dall'altezza del container flessibile. o una linea flessibile nel caso di un insieme di elementi aggregati.

Il valore iniziale di align-self è stretch, ed è per questo che, per impostazione predefinita, gli elementi flessibili in una riga vengono allungati fino all'altezza dell'elemento più alto. Per modificare questa impostazione, aggiungi la proprietà align-self a uno dei tuoi 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 prossima demo 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 un valore di flex-start. Prova a modificare il valore di quella proprietà per vedere come si sposta all'interno del suo 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;
}

In questa demo successiva, prova a modificare il valore di align-items per allineare tutti gli elementi sull'asse trasversale come gruppo.

Perché non esiste justify-self in flexbox?

Gli elementi flessibili agiscono come un gruppo sull'asse principale. Non c'è quindi il concetto di suddivisione di un singolo elemento da quel gruppo.

Nel layout a griglia, le proprietà justify-self e justify-items funzionano sull'asse in linea per allineare gli elementi su quell'asse all'interno dell'area della griglia. Considerato il modo in cui i layout flessibili trattano gli elementi come un gruppo, queste proprietà non sono implementate in un contesto flessibile.

Vale la pena sapere che flexbox funziona molto bene con i margini automatici. Se devi separare un elemento da un gruppo o suddividere il gruppo in due, puoi applicare un margine. Nell'esempio seguente, 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 verso destra, suddividendo così i gruppi.

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, ossia riga. La proprietà align-items sull'asse trasversale.

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Verificare di aver compreso

Metti alla prova le tue conoscenze su flexbox

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

Risorse

• Il layout della casella flessibile CSS MDN include una serie di guide dettagliate con esempi.
• Guida ai trucchi CSS per Flexbox
• Cosa succede quando crei un contenitore flessibile Flexbox
• Tutto quello che devi sapere sull'allineamento in Flexbox
• Quanto è grande la scatola flessibile?
• Casi d'uso per Flexbox
• Esaminare ed eseguire il debug dei layout CSS Flexbox in Chrome DevTools