Flexbox

Podcast CSS - 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 a scatola flessibile (flexbox) è un modello di layout progettato per contenuti unidimensionali. eccelle nel prendere una serie di oggetti di dimensioni diverse, e restituire il layout migliore per questi elementi.

Questo è il modello di layout ideale per questo pattern della 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 far seguire al browser, con Flexbox, puoi stabilire dei limiti flessibili per indicare in che modo 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 sempre più grandi in base allo spazio disponibile per il genitore.
• Lo spazio può essere distribuito intorno agli elementi e alle linee flessibili in un layout aggregato, usando le proprietà di Allineamento ai riquadri.
• Gli elementi stessi possono essere allineati sull'asse trasversale.

Asse principale e asse trasversale

La chiave per comprendere il flexbox è comprendere il concetto di asse principale e asse trasversale. L'asse principale è quello impostato dalla tua 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 una grande varietà di cose e stiamo cercando di ottenere il miglior layout per loro come 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.

Puoi eseguire due operazioni sull'asse trasversale. 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 questo nella pratica in questa guida, per ora ricorda solo che l'asse principale segue il valore flex-direction.

Creazione di un container flessibile

Vediamo come si comporta flexbox prendendo un gruppo di elementi di dimensioni diverse e utilizzando flexbox per posizionare l'elemento di eseguirli.

<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 presentare un comportamento flexbox, utilizzando i relativi valori iniziali.

I valori iniziali indicano che:

• Gli elementi vengono visualizzati come riga.
• Non lo 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. Per creare una riga, non devi aggiungere la proprietà. Per cambiare 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 sono disposti in una colonna dalla fine del container flessibile.

Puoi provare tutti i valori utilizzando il gruppo di elementi nella demo qui sotto.

Invertire il flusso degli elementi e l'accessibilità

Fai attenzione quando utilizzi proprietà che riordinano la visualizzazione visiva dall'ordine degli elementi nel documento HTML, perché può influire negativamente sull'accessibilità. I valori row-reverse e column-reverse ne sono un buon esempio. 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, il riordinamento deve includere dei test accurati per verificare che il tuo sito non venga reso 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 sulla destra. L'ordine delle tabulazioni inizierà anche a destra poiché è questo il modo in cui le frasi vengono lette in arabo.

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

Pertanto, il comportamento predefinito degli elementi flessibili è collegato alla modalità di scrittura del documento. La maggior parte dei tutorial è scritta in inglese o in un'altra orizzontale, modalità di scrittura da sinistra a destra. In questo modo, sarebbe facile supporre che gli elementi flessibili siano allineati a sinistra e eseguiti in orizzontale.

Considerando gli assi principale e trasversale più la modalità di scrittura, parliamo di start e end invece che top, bottom, sinistra e destra flexbox potrebbe essere più facile da capire. Ogni asse ha un inizio e una fine. L'inizio dell'asse principale è indicato come main-start. Quindi i nostri articoli flessibili inizialmente si allineano dall'inizio principale. La fine di questo asse è main-end. L'inizio dell'asse trasversale è cross-start e la fine cross-end.

Wrapping di elementi flessibili

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

Gli elementi visualizzati con i valori iniziali verranno ridotti il più possibile, fino alla dimensione min-content prima che si verifichi l'overflow.

Per aggregare gli elementi, aggiungi flex-wrap: wrap al contenitore flessibile.

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

L'avvolgimento di un contenitore flessibile crea più linee flessibili. In termini di distribuzione dello spazio, ciascuna 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 significa che flexbox è unidimensionale. Puoi controllare l'allineamento su un asse, una riga o una colonna non insieme, come possiamo fare nella griglia.

Abbreviazione del flusso flessibile

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 di 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 elementi possono restringersi meno del relativo elemento flex-basis.
• flex-basis: auto: gli elementi hanno una dimensione di base pari a 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 far crescere gli articoli, consentendo però agli elementi più grandi di avere più spazio rispetto a quelli più piccoli che usano 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 di flex-basis.
• flex-shrink: 1: gli elementi possono restringersi meno del relativo flex-basis.
• flex-basis: auto: gli elementi hanno una dimensione di base pari a 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. Quindi un elemento di grandi dimensioni occuperà più spazio. Per forzare tutti gli elementi a avere una dimensione coerente e ignorare la dimensione della modifica dei contenuti. Da flex:auto a flex: 1 nella demo.

che si separa in:

• flex-grow: 1: gli elementi possono diventare più grandi di 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 agli articoli di crescere a velocità diverse

Non è necessario assegnare a tutti gli elementi un fattore di flex-grow pari a 1. Potresti assegnare diversi fattori flex-grow ai tuoi 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 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, la seconda 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.

Riordinamento di elementi flessibili

Gli elementi nel contenitore flessibile possono essere riordinati utilizzando la proprietà order. Questa proprietà consente l'ordinamento degli elementi nei gruppi ordinali. Gli elementi vengono disposti nella direzione dettata da flex-direction, per primi i valori più bassi. Se più di un elemento ha lo stesso valore, verrà visualizzato insieme agli altri elementi con quel valore.

L'esempio seguente mostra questo ordinamento.

Verifica le tue conoscenze

Verifica le tue conoscenze di Flexbox

Panoramica dell'allineamento a Flexbox

Flexbox ha fornito una serie di proprietà per l'allineamento degli elementi e la distribuzione di spazio tra gli elementi. Queste proprietà erano così utili che sono state spostate nella loro specifica li troverai anche nel layout a griglia. Qui puoi scoprire come funzionano quando utilizzi flexbox.

L'insieme di proprietà può essere suddiviso in due gruppi. Proprietà di distribuzione degli spazi e proprietà di allineamento. Le proprietà che distribuiscono lo spazio sono:

• justify-content: distribuzione degli spazi 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-. Sull'asse trasversale iniziano con align-.

Distribuzione dello spazio sull'asse principale

Con il codice HTML utilizzato in precedenza, ovvero gli elementi flessibili disposti su riga, c'è uno 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 cambiato flex-direction in column, allora justify-content funzionerà su nella colonna. Per avere spazio libero nel contenitore quando lavori come colonna, devi assegnare al container height o block-size. In caso contrario, non avrai spazio libero da distribuire.

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

Distribuzione dello spazio tra le linee flessibili

Con un container 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 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 forma abbreviata di place-content

Per impostare sia justify-content sia align-content puoi usare place-content con uno o due valori. Viene utilizzato un singolo valore per entrambi gli assi se specifichi sia il primo è 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

Sull'asse trasversale puoi anche allineare gli elementi all'interno della linea 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 container 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 a croce come gruppo.

Perché non c'è la giustificazione in flexbox?

Gli elementi flessibili agiscono come 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 hai la necessità di separare un elemento da un gruppo, oppure separare il gruppo in due gruppi, 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 sposta l'elemento verso destra, suddividendo 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;
}

Verifica le tue conoscenze

Verifica le tue conoscenze di 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 container flessibile Flexbox
• Tutto quello che devi 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