Allineare le scatole con css usando un contenitore flessibile. Tutto quello che c'è da sapere sugli articoli Flexbox Alignment Flex

Modulo di marcatura Flexbox ( dall'inglese Scatola flessibile - blocco flessibile), attualmente in fase “ Possibile raccomandazione»Normazione W3C ( Raccomandazione del candidato W3C) mira a fornire un modo più efficiente per contrassegnare, allineare e distribuire lo spazio tra gli elementi in un contenitore, anche se la loro dimensione è sconosciuta e/o determinata dinamicamente ( per questo è stato chiamato "flessibile").

L'idea principale alla base dei layout flessibili è quella di dare al contenitore la possibilità di modificare l'altezza/larghezza (e l'ordine) dei suoi elementi per riempire in modo ottimale lo spazio disponibile ( principalmente per supportare tutti i tipi e dimensioni di schermi).

Un contenitore flessibile allunga gli elementi per riempire lo spazio libero o li riduce per evitare che escano dai limiti.

Ancora più importante, il layout Flexbox è indipendente dalla direzione, al contrario dei layout regolari ( blocchi che sono orientati verticalmente ed elementi in linea che sono orizzontalmente).

Sebbene gli elementi di markup regolari funzionino bene per le pagine, mancano di flessibilità ( e questo non è un gioco di parole) per supportare applicazioni grandi e complesse ( soprattutto quando si tratta di cambiare orientamento, dimensioni, allungamento, restringimento e così via).

Nota: il markup Flexbox è più adatto per componenti di applicazioni e layout di piccole dimensioni, mentre il markup basato su griglia è più adatto per layout su larga scala.

Concetti e termini di base

Poiché Flexbox è un intero modulo e non una proprietà separata, contiene molti elementi, incluso un intero insieme di proprietà. Alcuni di essi sono destinati ad essere applicati ad un contenitore ( un elemento genitore noto come contenitore flessibile), mentre altri dovrebbero essere applicati ai bambini ( chiamiamoli articoli flessibili).

Mentre il markup convenzionale si basa su direzioni box e inline, il markup flessibile si basa su direzioni di flusso flessibili. Si prega di consultare il diagramma seguente dalle specifiche per spiegare l'idea di base alla base del markup flessibile:

Fondamentalmente, gli elementi verranno posizionati lungo l'asse principale ( dal punto main-start a main-end), o lungo l'asse trasversale ( dal punto di inizio incrociato al punto di arrivo incrociato):

asse principale è l'asse principale del contenitore flessibile lungo il quale sono disposti gli elementi flessibili. Attenzione, non deve essere orizzontale, la sua posizione dipende dalla proprietà flex-direction (vedi sotto);
inizio principale | main-end - gli elementi flessibili si trovano all'interno del contenitore, a partire dal punto di inizio principale e raggiungendo il punto di fine principale;
la dimensione principale è la larghezza o l'altezza dell'articolo flessibile, a seconda della dimensione principale. La proprietà della dimensione principale può essere impostata sulla larghezza o sull'altezza;
asse trasversale - l'asse trasversale perpendicolare all'asse principale. La sua direzione dipende dalla direzione dell'asse principale.
inizio incrociato | cross-end - le linee flessibili vengono riempite con oggetti e posizionate nel contenitore, a partire dal lato cross-start verso il lato cross-end;
dimensione croce - la larghezza o l'altezza dell'elemento flessibile, a seconda della dimensione selezionata. La proprietà può avere un valore della larghezza o dell'altezza della quota trasversale.

Proprietà della classe padre (contenitore flessibile)

Schermo

Questa proprietà definisce il contenitore flex: inline o block, a seconda del valore impostato. Consente inoltre un contesto flessibile per tutti i suoi discendenti diretti:

Contenitore (display: flex; / * o inline-flex * /)

Nota che le colonne CSS non hanno effetto in un contenitore flessibile.

direzione di flessione

Questa proprietà imposta l'asse principale, che determina la direzione in cui gli elementi flessibili sono disposti nel contenitore flessibile. Flexbox ( escluso avvolgimento opzionale) è un concetto di markup unidirezionale.

Immagina che gli elementi flessibili siano posizionati principalmente in colonne orizzontali o verticali:

Contenitore (direzione flessibile: riga | riga inversa | colonna | colonna inversa;)

riga (predefinito): da sinistra a destra per ltr; da destra a sinistra per rtl;
riga inversa: da destra a sinistra per in litri; da sinistra a destra per rtl;
colonna: come riga, ma dall'alto verso il basso;
inversione di colonna: come l'inversione di riga, ma dal basso verso l'alto.

flex-wrap

Per impostazione predefinita, gli elementi flessibili cercheranno di comprimersi in una riga. Puoi cambiarlo e avvolgere gli elementi come desiderato con questa proprietà. Anche la direzione in cui si trovano le nuove linee gioca un ruolo qui:

Contenitore (flex-wrap: nowrap | wrap | wrap-reverse;)

nowrap (predefinito): riga singola / da sinistra a destra per ltr; da destra a sinistra per rtl;
wrap: multiline / da sinistra a destra per ltr; da destra a sinistra per rtl;
wrap-reverse: multilinea / da destra a sinistra per ltr; da sinistra a destra per rtl.

flex-flow (si applica al genitore del contenitore flex)

Questa è una forma abbreviata delle proprietà flex-direction e flex-wrap, che insieme definiscono l'asse principale e trasversale di un contenitore flessibile. L'impostazione predefinita è riga nowrap:

flusso flessibile:<‘flex-direction’> || <‘flex-wrap’>

giustifica-contenuto

Questa proprietà imposta l'allineamento lungo l'asse principale. Ciò aiuta ad allocare lo spazio libero in eccesso quando tutti gli elementi flessibili di una riga sono poco flessibili o flessibili ma hanno raggiunto la dimensione massima. Inoltre, questa proprietà consente di ottenere il controllo sull'allineamento degli elementi quando superano i limiti della linea:

Contenitore (justify-content: flex-start | flex-end | center | space-between | space-around;)

flex-start (predefinito): gli elementi sono allineati all'inizio della riga;
flex-end: gli elementi sono allineati alla fine della riga
centro: gli elementi sono allineati al centro della linea;
spazio tra: gli elementi sono distribuiti uniformemente nella riga: il primo elemento si trova all'inizio della riga, l'ultimo - alla fine;
space-around: gli elementi sono equidistanti sulla linea con la stessa spaziatura.

allinea-oggetti

Questa proprietà determina il modo in cui gli elementi flessibili sono posizionati per impostazione predefinita in relazione all'asse trasversale sulla riga corrente. Può essere pensato come la versione cross-axis di giustifica-contenuto ( perpendicolare alla principale):

Contenitore (allinea elementi: flex-start | flex-end | center | baseline | stretch;)

flex-start: il bordo degli elementi di cross-start è sulla linea di cross-start;
flex-end: il bordo degli elementi di inizio incrociato è sulla riga di fine incrociato;
centro: gli elementi sono centrati sull'asse trasversale;
linea di base: gli elementi sono allineati secondo la linea di base;
stretch (default): gli elementi si allungano per riempire il contenitore ( considerando i valori di larghezza minima / larghezza massima).

allinea-contenuto

Questa proprietà consente di allineare le linee all'interno di un contenitore flessibile quando c'è spazio libero sull'asse trasversale, in modo simile a come la proprietà di contenuto giustificato allinea i singoli elementi all'asse principale.

Nota: questa proprietà non funzionerà se è presente solo una riga di elementi flessibili:

flex-start: le linee sono posizionate all'inizio del contenitore;
flex-end: le linee sono posizionate all'estremità del contenitore;
centro: le linee sono posizionate al centro del contenitore;
space-between: le linee sono spaziate uniformemente; la prima riga è all'inizio del contenitore e l'ultima è alla fine;
space-around: le linee sono spaziate uniformemente alla stessa distanza l'una dall'altra;
stretch (predefinito): le linee vengono allungate per riempire lo spazio rimanente.

Proprietà figlio

(articoli flessibili)

Ordine

Per impostazione predefinita, gli articoli flessibili sono disposti nell'ordine di origine. Tuttavia, la proprietà order controlla l'ordine in cui gli elementi vengono visualizzati nel contenitore flessibile:

Articolo (ordine: ; }

flex-grow

Questa proprietà consente all'elemento flessibile di "crescere" secondo necessità. Assume un valore adimensionale che funge da proporzione. Questo valore determina la quantità di spazio disponibile all'interno del contenitore flessibile che l'elemento può occupare.

Se tutti gli elementi hanno flex-grow impostato su 1, ogni elemento figlio verrà impostato sulla stessa dimensione all'interno del contenitore. Se imposti uno dei bambini su 2, occuperà il doppio dello spazio degli altri:

Articolo (crescita flessibile: ; / * predefinito 0 * /)

flex-shrink

Questa proprietà riduce gli elementi flessibili secondo necessità:

Articolo (flex-retraibile: ; / * predefinito 1 * /)

Non sono ammessi numeri negativi.

base flessibile

Questa proprietà determina la dimensione predefinita degli elementi prima di allocare lo spazio rimanente:

Articolo (base flessibile: | auto; / * il valore predefinito è automatico * /)

flettere

Questa proprietà è una scorciatoia per la combinazione di flex-grow, flex-shrink e flex-basi. Il secondo e il terzo parametro (flex-shrink e flex-basis) sono facoltativi. Valori di default: 0 1 automatico:

Elemento (flex: nessuno | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

allinearsi

Questa proprietà consente di sovrascrivere l'allineamento predefinito ( o definito dalla proprietà align-items) per i singoli articoli flessibili.

I valori disponibili si trovano nella descrizione della proprietà align-items:

Nota che float, clear e vertical-align non funzionano con gli elementi flessibili.

Esempi di

Partiamo da un esempio molto semplice, risolvendo un problema quasi quotidiano: perfetto allineamento al centro. Non potrebbe essere più facile usare flexbox:

Parent (display: flex; altezza: 300 px; / * O qualunque cosa * /) .child (larghezza: 100 px; / * O qualunque cosa * / altezza: 100 px; / * O qualunque cosa * / margin: auto; / * Magic! * / )

Questo esempio si basa sul fatto che la proprietà margin impostata su auto consuma spazio aggiuntivo. Pertanto, questa impostazione del rientro allinea l'elemento esattamente al centro di entrambi gli assi.

Ora usiamo qualche altra proprietà. Supponiamo di avere una lista di 6 elementi, tutti di dimensione fissa ( per l'estetica), ma con l'opzione di riempimento automatico.

Vogliamo che siano belli, equamente distanziati lungo l'asse orizzontale in modo che quando la finestra del browser viene ridimensionata, tutto appaia a posto ( senza utilizzare media query):

Flex-container (/ * Prima creiamo il contesto del layout flessibile * / display: flex; / * Quindi definiamo la direzione del flusso e se vogliamo che gli elementi vengano avvolti. * Ricorda che è lo stesso di: * flex-direction : row; * flex-wrap: wrap; * / flex-flow: row wrap; / * Ora definiamo come allocare lo spazio rimanente * / require-content: space-around;)

Pronto! Tutto il resto è già una questione di design. Ecco una demo di questo esempio. Segui il link e prova a ridimensionare la finestra per vedere cosa succede:

HTML:

CSS:

Flex-container (padding: 0; margin: 0; list-style: nessuno; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: riga a capo; require-content: space-around;). flex-item (sfondo: pomodoro; padding: 5px; larghezza: 200px; altezza: 150px; margin-top: 10px; line-height: 150px; colore: bianco; spessore del carattere: grassetto; dimensione del carattere: 3em; allineamento del testo: centro;)

Proviamo un'altra cosa. Diciamo che abbiamo un menu di navigazione allineato a destra nella parte superiore del nostro sito Web, ma vogliamo che sia centrato su schermi di medie dimensioni e una colonna su dispositivi di piccole dimensioni. Tutto è abbastanza semplice:

CSS:

/ * Schermi grandi * / .navigation (display: flex; flex-flow: a capo riga; / * Allinea gli elementi alla fine della riga lungo l'asse principale * / require-content: flex-end;) / * Schermi medi * / @media all and (max-width: 800px) (.navigation (/ * Per schermi medi, centriamo gli elementi distribuendo uniformemente lo spazio libero tra di loro * / require-content: space-around;)) / * Schermi piccoli * / @media all and (max-width: 500px) (.navigation (/ * Per gli schermi piccoli, usiamo le colonne anziché le righe * / flex-direction: column;))

HTML:

CSS:

Navigazione (stile elenco: nessuno; margine: 0; sfondo: deepskyblue; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit -flex-flow: ritorno a capo; giustifica-contenuto: flex-end;) .navigation a (decorazione del testo: nessuna; display: block; padding: 1em; colore: bianco;) .navigation a: hover (sfondo: scuro ( deepskyblue, 2%);) @media all and (max-width: 800px) (.navigation (justify-content: space-around;)) @media all and (max-width: 600px) (.navigation (-webkit- flex-flow: a capo colonna; flex-flow: a capo colonna; padding: 0;). navigation a (text-align: center; padding: 10px; border-top: 1px solid rgba (255,255,255,0.3); border-bottom: 1px solid rgba (0,0,0,0.1);). Navigation li: last-of-type a (border-bottom: nessuno;))

Proviamolo ancora meglio giocando con la "flessibilità" degli oggetti flessibili. Che ne dici di un layout mobile a tre colonne con un'intestazione e un piè di pagina a tutta larghezza? E con l'output di elementi indipendenti dall'ordine dato dal codice sorgente:

CSS:

Wrapper (display: flex; flex-flow: row wrap;) / * Imposta tutti gli elementi su 100% di larghezza * / .header, .main, .nav, .aside, .footer (flex: 1 100%;) / * In questo caso, ci affidiamo all'ordine originale per indirizzare i dispositivi mobili: * 1. titolo * 2. navigazione * 3. corpo * 4. barra laterale * 5. piè di pagina * / / * schermi medi * / @media all e (min -width : 600px) (/ * Entrambe le barre laterali sono sulla stessa riga * / .aside (flex: 1 auto;)) / * Schermi grandi * / @media all and (min-width: 800px) (/ * Inverti l'ordine di visualizzazione prima barra laterale e il corpo principale, e dire all'elemento principale di occupare al massimo il doppio dello spazio delle due barre laterali * / .main (flex: 2 0px;) .aside-1 (order: 1;) .main (order : 2;) .aside-2 (ordine: 3;) .footer (ordine: 4;))

HTML:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

CSS:

Wrapper (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: a capo riga; flex-flow: a capo riga ; font-weight: grassetto; text-align: center;) .wrapper> * (padding: 10px; flex: 1 100%;) .header (sfondo: pomodoro;) .footer (sfondo: verde chiaro;) .main (testo -align: left; background: deepskyblue;) .aside-1 (background: gold;) .aside-2 (background: hotpink;) @media all and (min-width: 600px) (.aside (flex: 1 auto; )) @media all and (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (order: 2;) .aside-2 (order: 3; ) .piè di pagina (ordine: 4;))

Utilizzo dei prefissi flexbox

Flexbox richiede che i prefissi del fornitore siano supportati dalla maggior parte dei browser. Ciò include non solo l'utilizzo dei prefissi del fornitore prima delle proprietà, ma anche di nomi e valori di proprietà completamente diversi.

Questo perché la specifica flexbox si è evoluta nel tempo, creando versioni "vecchie", "tweener" e "nuove".

Forse il modo migliore per uscire da questa situazione è scrivere codice usando la nuova (e finale) sintassi ed eseguire il CSS tramite Autoprefixer, che gestisce molto bene i rollback.

In alternativa, di seguito è riportato un metodo Sass @mixin per aiuto con alcuni prefissi, che dà anche un'idea di quale azione dovrebbe essere intrapresa:

SCSS:

@mixin flexbox () (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;) @mixin flex (valori $) (-webkit- box-flex: $ valori; -moz-box-flex: $ valori; -webkit-flex: $ valori; -ms-flex: $ valori; flex: $ valori;) @mixin order ($ val) (-webkit- box-ordinal-group: $ val; -moz-box-ordinal-group: $ val; -ms-flex-order: $ val; -webkit-order: $ val; order: $ val;) .wrapper (@include flexbox ();) .item (@include flex (1 200px); @include order (2);)

Supporto browser

Diviso per "versioni" flexbox in:

(nuovo) - indica il supporto per l'ultima sintassi della specifica (ad esempio, display: flessibile;
Lo pseudo-elemento :: colore segnaposto (o in alcuni casi una pseudo-classe) consente di specificare il contenuto testuale di un elemento del modulo. Viene impostato utilizzando l'attributo segnaposto: .

Contenuto:

Flexboxè un nuovo modo per organizzare i blocchi su una pagina. Questa è una tecnologia creata appositamente per il layout degli elementi, al contrario dei float. Usando Flexbox puoi facilmente allineare gli elementi orizzontalmente e verticalmente, cambiare la direzione e l'ordine degli elementi, allungare i blocchi all'intera altezza del genitore o inchiodarli al bordo inferiore.

AGGIORNAMENTO dal 02.02.2017: ha realizzato un pratico cheat sheet di Flexbox, con demo live e descrizioni delle specifiche: Flexbox cheatsheet.

Gli esempi utilizzano solo la nuova sintassi. Al momento della stesura di questo articolo, sono visualizzati più correttamente in Cromo... In Firefox funzionano parzialmente, in Safari non funzionano affatto.

Secondo caniuse.com, Flexbox non è supportato da IE 8 e 9 e Opera Mini, e non tutte le proprietà e/o i prefissi sono richiesti in altri browser.

Ciò significa che la tecnologia non può essere ampiamente utilizzata in questo momento, ma è giunto il momento di conoscerla meglio.

Innanzitutto, devi sapere che gli elementi flessibili sono posizionati lungo gli assi. Per impostazione predefinita, gli elementi sono disposti orizzontalmente - lungo asse principale- l'asse principale.

Va inoltre tenuto presente che quando si utilizza Flexbox float, clear e vertical-align non funzionano per i blocchi interni, così come le proprietà che impostano le colonne nel testo.

Prepariamo un banco di prova per gli esperimenti:

Un blocco genitore (giallo) e 5 figli.

Display: flessibile

E ora aggiungi display: flex all'elemento genitore; ... I div interni sono allineati (lungo l'asse principale) in colonne della stessa altezza, indipendentemente dal contenuto.

display: flessibile; rende tutti i bambini flessibili - flessibili, non in linea o bloccati come erano originariamente.

Se il blocco padre contiene immagini o testo senza wrapper, diventano elementi flessibili anonimi.

Mostra proprietà per Flexbox può assumere due valori:

flex - si comporta come un elemento di blocco. Quando si calcola la larghezza dei blocchi, il layout ha la priorità (se la larghezza dei blocchi è insufficiente, il contenuto può strisciare fuori dal confine).

inline-flex - si comporta come inline-block. Priorità del contenuto (il contenuto espande i blocchi alla larghezza richiesta in modo che le linee si adattino il più possibile).

Flex-direzione

La direzione del layout delle scatole è controllata dalla proprietà flex-direction.

Valori possibili:

riga - riga (valore predefinito); row-reverse - una riga con elementi in ordine inverso; colonna - colonna; column-reverse - una colonna con elementi in ordine inverso.

riga e riga inversa

colonna e colonna inversa

Flex-wrap

Ci possono essere molti blocchi su una riga. Il wrapping o meno è determinato dalla proprietà flex-wrap.

Valori possibili:

nowrap - i blocchi non sono incapsulati (predefinito); wrap: i blocchi vengono avvolti; wrap-reverse: i blocchi vengono spostati e posizionati in ordine inverso.

Per scrivere brevemente le proprietà flex-direction e flex-wrap, c'è una proprietà: flex-flow.

Valori possibili: puoi impostare entrambe le proprietà o solo una. Per esempio:

flex-flow: colonna; flex-flow: wrap-reverse; flex-flow: avvolgimento inverso di colonna;

Demo per l'inversione di riga inversa:

Ordine

La proprietà order viene utilizzata per controllare l'ordine dei blocchi.

Valori possibili: numeri. Per mettere il blocco per primo, imposta l'ordine: -1 su di esso:

Giustifica contenuto

Ci sono diverse proprietà per allineare gli elementi: require-content, align-items e align-self.

Gli elementi di allineamento e contenuto si applicano al contenitore padre, allineamento ai figli.

giustifica-contenuto è responsabile dell'allineamento con l'asse principale.

Valori possibili per il contenuto giustificato:

flex-start - gli elementi sono allineati dall'inizio dell'asse principale (predefinito); flex-end: gli elementi sono allineati dall'estremità dell'asse principale; centro - gli elementi sono allineati al centro dell'asse principale; spazio tra - gli elementi sono allineati lungo l'asse principale, distribuendo lo spazio libero tra loro; space-around: gli elementi sono allineati lungo l'asse principale, distribuendo lo spazio libero attorno a loro.

flex-start e flex-end

spazio-tra, spazio-intorno

Allinea-oggetti

align-items è responsabile dell'allineamento dell'asse perpendicolare.

Valori possibili per gli elementi di allineamento:

flex-start - gli elementi sono allineati dall'inizio dell'asse perpendicolare; flex-end: gli elementi sono allineati dall'estremità dell'asse perpendicolare; centro - gli elementi sono centrati; linea di base - gli elementi sono allineati alla linea di base; stretch - Gli elementi vengono allungati per riempire tutto lo spazio lungo l'asse perpendicolare (impostazione predefinita).

inizio flessibile, fine flessibile

linea di base, tratto

Allinea-sé

align-self è anche responsabile dell'allineamento dell'asse perpendicolare, ma è impostato su singoli elementi flessibili.

Possibili valori di allineamento automatico:

automatico è l'impostazione predefinita. Significa che l'elemento utilizza gli elementi di allineamento dell'elemento genitore; flex-start - l'elemento è allineato dall'inizio dell'asse perpendicolare; flex-end: l'elemento è allineato dall'estremità dell'asse perpendicolare; centro - l'elemento è centrato; linea di base - l'elemento è allineato alla linea di base; stretch - L'elemento viene allungato per riempire l'intera altezza.

Allinea-contenuto

Per controllare l'allineamento all'interno di un contenitore flessibile multilinea, c'è la proprietà align-content.

Valori possibili:

flex-start - gli elementi sono allineati dall'inizio dell'asse principale; flex-end: gli elementi sono allineati dall'estremità dell'asse principale; centro - gli elementi sono allineati al centro dell'asse principale; spazio tra - gli elementi sono allineati lungo l'asse principale, distribuendo lo spazio libero tra loro; space-around: gli elementi sono allineati lungo l'asse principale, distribuendo lo spazio libero attorno a loro; stretch - Gli elementi si allungano per riempire la loro intera altezza (predefinito).

inizio flessibile, fine flessibile

centro, allunga

spazio-tra, spazio-intorno

Ps: Alcune cose che non ho potuto vedere in azione, per esempio, la linea flex-flow: column wrap o la registrazione completa della stessa flex-direction: column; flex-wrap: avvolgere; ...

Gli elementi sono impilati, ma non trasportati:

Wrap non si attiva quando flex-direction: column; , sebbene nelle specifiche assomigli a questo:

Penso che funzionerà nel tempo.

AGGIORNAMENTO dal 21.06.2014: tutto funziona se dai un'altezza al blocco. Grazie per il consiglio

Il modulo Flexbox Layout (Flexible Box) mira a fornire un modo più efficiente di posizionare, allineare e distribuire lo spazio libero tra gli articoli in un contenitore, anche quando la loro dimensione è sconosciuta e/o dinamica (da cui la parola "flex").

L'idea alla base dei layout flessibili è quella di dare al contenitore la possibilità di modificare la larghezza/altezza (e l'ordine) dei suoi articoli al fine di riempire al meglio lo spazio disponibile (principalmente per adattarsi a tutti i tipi e dimensioni di schermi). Un contenitore flexbox espande gli elementi per riempire lo spazio libero o li riduce per evitare l'overflow.

Ancora più importante, Flexbox è indipendente dalla direzione, a differenza dei layout convenzionali (scatole basate sul posizionamento verticale ed elementi in linea basati sul posizionamento orizzontale). Sebbene funzionino abbastanza bene, non hanno la flessibilità per supportare applicazioni grandi o complesse (specialmente quando si tratta di riorientare, ridimensionare, allungare, ridurre, ecc.).

Nota. Flexbox è più adatto per componenti applicativi e layout di piccole dimensioni, mentre CSS Grid è per layout più grandi.

Fondamenti e terminologia

Poiché Flexbox è un intero modulo e non una proprietà separata, contiene molte cose diverse, tra cui un intero gruppo di proprietà. Alcuni sono progettati per essere impostati sul loro contenitore (il genitore, noto come "contenitore flessibile"), mentre altri sono pensati per essere impostati sui figli (noti come "elementi flessibili").

Mentre il sistema di layout convenzionale si basa su direzioni box e inline, Flexbox si basa su "direzioni flex-flow". Si prega di dare un'occhiata a questa figura dalle specifiche per spiegare l'idea di base dietro Flexbox.

Fondamentalmente, gli elementi saranno posizionati lungo asse principale(dall'inizio principale all'estremità principale) o asse trasversale(dall'inizio alla fine).

Supporto browser

Modulo layout scatola flessibile CSS

Chrome per Android

Il browser Blackberry, a partire dalla versione 10, supporta la nuova sintassi.

Proprietà per il contenitore

Proprietà per gli elementi

Proprietà per padre (contenitore flessibile)

Schermo

Definisce un contenitore flessibile; stringa o blocco dipende dal valore passato. Include il contesto flessibile per tutti i suoi figli diretti.

Contenitore (display: flex; / * o inline-flex * /)

Tieni presente che le colonne CSS non influiscono sul contenitore flessibile.

direzione di flessione

Imposta l'asse principale, quindi determina la direzione degli elementi che si trovano nel contenitore. Flexbox (oltre al wrapper opzionale) è un concetto di layout unidirezionale. Pensa agli elementi flessibili principalmente come righe orizzontali o colonne verticali.

Contenitore (direzione flessibile: riga | riga inversa | colonna | colonna inversa;)

riga (predefinito)- da sinistra a destra in litri; da destra a sinistra in rtl;
riga inversa- da destra a sinistra in litri; da sinistra a destra in rtl;
colonna- lo stesso della riga, solo dall'alto verso il basso;
colonna inversa- lo stesso dell'inversione di fila, solo dal basso verso l'alto;

flex-wrap

Per impostazione predefinita, gli elementi cercheranno di riempire solo una riga. Puoi modificare questo comportamento e consentire agli elementi di andare a capo alla riga successiva, se necessario.

Contenitore (flex-wrap: nowrap | wrap | wrap-reverse;)

nowrap (predefinito)- tutti gli articoli flessibili saranno posizionati su una riga;
avvolgere- gli articoli flex saranno disposti su più righe, dall'alto verso il basso;
wrap-reverse- gli elementi flessibili saranno disposti su più righe, dal basso verso l'alto;

giustifica-contenuto

Determina l'allineamento lungo l'asse principale. Ciò aiuta a distribuire lo spazio libero rimasto dopo che tutti gli elementi flessibili fissi e non fissi hanno raggiunto la dimensione massima. Ti aiuta anche a mantenere un certo controllo sull'allineamento degli elementi quando traboccano dalla linea.

Contenitore (justify-content: flex-start | flex-end | center | space-between | space-around;)

flex-start (predefinito)- gli elementi vengono premuti all'inizio della riga;
flex-end- gli elementi vengono premuti fino alla fine della riga;
centro- gli elementi sono centrati lungo la linea;
spazio-tra- gli elementi sono posizionati uniformemente sulla linea; il primo elemento è all'inizio della riga, l'ultimo elemento è alla fine della riga;
spazio-intorno- gli elementi sono disposti in modo uniforme su una linea con lo stesso spazio intorno a loro. Nota che visivamente lo spazio non è lo stesso poiché tutti gli elementi hanno lo stesso spazio su entrambi i lati. Il primo elemento avrà un'unità di spazio sul lato del contenitore, ma due unità tra esso e l'elemento successivo, perché anche l'elemento successivo ha un'unità su entrambi i lati.

allinea-oggetti

Questa proprietà determina il comportamento degli elementi flessibili lungo l'asse trasversale sulla riga corrente. Pensalo come oh, solo per l'asse trasversale (perpendicolare all'asse principale).

Contenitore (allinea elementi: flex-start | flex-end | center | baseline | stretch;)

flex-start - gli elementi sono posti all'inizio dell'asse trasversale;
estremità flessibile - gli elementi sono posti all'estremità dell'asse trasversale;
centro - gli elementi si trovano al centro dell'asse trasversale;
linea di base- gli elementi sono allineati alla linea di base;
allungare (predefinito)- allungare per riempire l'intero contenitore (rispettare comunque la larghezza minima / larghezza massima);

allinea-contenuto

Nota. Questa proprietà non ha effetto quando è presente una sola riga di elementi flessibili.

flex-start- le linee si trovano all'inizio del contenitore;
flex-end- le linee si trovano alla fine del contenitore;
centro- le linee sono posizionate al centro del contenitore;
spazio-tra- le righe sono distribuite uniformemente, la prima riga è all'inizio del contenitore e l'ultima riga alla fine;
spazio-intorno- le linee sono distribuite uniformemente, con la stessa distanza tra loro;
allungare (predefinito)- le linee si estendono su tutta la larghezza per occupare lo spazio rimanente;

Proprietà per bambini (articoli flessibili)

ordine

Per impostazione predefinita, tutti gli elementi sono disposti nel loro ordine originale. Tuttavia, la proprietà order controlla l'ordine in cui gli elementi sono disposti all'interno del contenitore.

Articolo (ordine: ; }

flex-grow

La proprietà determina la capacità dell'elemento di crescere di dimensioni, se necessario. Prende un valore senza unità come proporzione, che determina quanto spazio libero all'interno del contenitore dovrebbe occupare l'elemento.

Se tutti gli elementi hanno flex-grow impostato su 1, lo spazio libero all'interno del contenitore verrà distribuito uniformemente tra tutti gli elementi. Se uno degli elementi ha un valore di 2, allora l'elemento occuperà il doppio dello spazio degli altri (almeno ci proverà).

Articolo (crescita flessibile: ; / * predefinito 0 * /)

Non è possibile specificare numeri negativi.

base flessibile

Determina la dimensione predefinita dell'elemento, prima che venga allocato lo spazio rimanente. Può essere la lunghezza (20%, 5rem, ecc.) o una parola chiave. La parola chiave auto significa "assomiglia alla mia proprietà larghezza o altezza". La parola chiave content significa "la dimensione si basa sul contenuto dell'elemento" - questa parola chiave non è ancora molto ben supportata, quindi è difficile da testare e ancora più difficile sapere quali sono i suoi fratelli min-content, max-content e fit-content sta facendo.

Articolo (base flessibile: | auto; / * automatico predefinito * /)

Se impostato su 0, lo spazio extra intorno al contenuto non verrà conteggiato. Se impostato su auto, lo spazio extra verrà allocato in base al valore.

flettere

Questa è una scorciatoia per e. Il secondo e il terzo parametro (flex-shrink e flex-basis) sono facoltativi. Il valore predefinito è 0 1 automatico.

Elemento (flex: nessuno | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

allinearsi

Questa proprietà ti consente di sovrascrivere l'allineamento predefinito (o set di proprietà) per i singoli elementi flessibili.

Si prega di guardare la spiegazione della proprietà per comprendere i valori disponibili.

Tieni presente che float, clear e vertical-align non hanno alcun effetto sull'elemento flessibile.

Esempi di

Partiamo dall'esempio più semplice che risolve un problema che si presenta quasi tutti i giorni: il centraggio perfetto. Non potrebbe essere più semplice se utilizzi Flexbox.

Parent (display: flessibile; altezza: 300 px;) .child (larghezza: 100 px; altezza: 100 px; margine: auto;)

Dipende dal margine automatico del contenitore flessibile che assorbe spazio extra. Pertanto, l'impostazione del margine verticale su auto su un elemento renderà l'elemento perfettamente centrato su entrambi gli assi.

Ora usiamo qualche altra proprietà. Considera un elenco di 6 elementi, tutti fissati esteticamente, ma possono essere automatici. Vogliamo che siano equamente distanziati lungo l'asse orizzontale e che vadano bene quando il browser viene ridimensionato (nessuna query multimediale!).

Flex-contenitore (display: flex; flex-flow: riga a capo; giustifica-contenuto: spazio intorno;)

Pronto! Tutto il resto sono solo alcuni problemi di progettazione. Di seguito è riportato un esempio su CodePen, assicurati di andare lì e prova a ridimensionare le finestre per vedere cosa succede.

Proviamo qualcos'altro. Immagina di avere una navigazione allineata a destra nella parte superiore dello schermo, ma vogliamo che sia centrata su schermi di medie dimensioni e una colonna su schermi piccoli. Facile come una torta.

Navigazione (display: flex; flex-flow: a capo riga; require-content: flex-end;) @media all and (max-width: 800px) (.navigation (justify-content: space-around;)) @media all e (larghezza massima: 500 px) (.navigazione (direzione flessibile: colonna;))

Proviamo a fare qualcosa di ancora migliore giocando con la flessibilità dei nostri articoli flex! Che ne dici di un layout mobile-first a tre colonne con un'intestazione e un piè di pagina a larghezza intera e non in base all'ordine originale degli elementi.

Wrapper (display: flex; flex-flow: row wrap;) .header, .main, .nav, .aside, .footer (flex: 1 100%;) @media all e (min-width: 600px) (.aside (flex: 1 auto;)) @media all and (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (order: 2;) .aside- 2 (ordine: 3;) .footer (ordine: 4;))

Proprietà correlate

Errori

Flexbox non è certamente privo di errori. La migliore raccolta che ho visto proviene da Philip Walton e Greg Whitworth's Flexbugs.Questo è un luogo Open Source per tenere traccia di tutti i bug, quindi penso che sia meglio postare solo un link.

Flexbox CSS (Modulo layout scatola flessibile)- il modulo di layout di un contenitore flessibile - è un modo di organizzare gli elementi, basato sull'idea di un asse.

Flexbox è composto da contenitore flessibile e articoli flessibili... Gli elementi Flex possono essere disposti in una riga o in una colonna e lo spazio libero rimanente è distribuito tra di loro in vari modi.

Il modulo flexbox consente di svolgere le seguenti attività:

Disponi gli elementi in una delle quattro direzioni: da sinistra a destra, da destra a sinistra, dall'alto verso il basso o dal basso verso l'alto.
Sostituisci l'ordine di visualizzazione degli elementi.
Ridimensiona automaticamente gli elementi per adattarli allo spazio disponibile.
Risolvi il problema con il centraggio orizzontale e verticale.
Avvolgere gli oggetti all'interno del contenitore senza traboccare.
Crea colonne di uguale altezza.
Crea appuntato in fondo alla pagina.

Flexbox soddisfa le esigenze specifiche della creazione di layout unidimensionali, come una barra di navigazione, poiché gli elementi flessibili possono essere disposti solo lungo un asse.

Per un elenco degli attuali problemi del modulo e delle soluzioni cross-browser, vedere l'articolo di Philip Walton.

Cos'è flexbox?

Supporto browser

CIOÈ: 11,0, 10,0 -ms-
Firefox: 28.0, 18.0 -moz-
Cromo: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Musica lirica: 12.1 -webkit-
Safari iOS: 7.0 -webkit-
Opera Mini: 8
Navigatore Android: 4.4, 4.1 -webkit-
Chrome per Android: 44

1. Concetti di base

Riso. 1. Il modello flexbox

Un insieme specifico di termini viene utilizzato per descrivere un modulo Flexbox. Il valore flex-flow e la modalità di scrittura definiscono come questi termini corrispondono alle direzioni fisiche: alto/destra/basso/sinistra, assi: verticale/orizzontale e dimensioni: larghezza/altezza.

Asse principale- l'asse lungo il quale sono disposti gli articoli flessibili. Si estende nella dimensione principale.

Inizio principale e fine principale- linee che definiscono i lati iniziale e finale del contenitore flessibile, rispetto al quale sono disposti gli elementi flessibili (a partire dall'inizio principale verso l'estremità principale).

Dimensione principale) - La larghezza o l'altezza del contenitore flessibile o degli elementi flessibili, qualunque sia la dimensione di base, determina la dimensione di base del contenitore flessibile o dell'elemento flessibile.

Asse trasversale- un asse perpendicolare all'asse principale. Si estende lateralmente.

Inizio incrociato e fine incrociato- Linee che definiscono i lati iniziale e finale dell'asse trasversale attorno al quale sono disposti gli elementi flessibili.

Dimensione della croce- la larghezza o l'altezza di un contenitore flessibile o di oggetti flessibili, qualunque sia la dimensione trasversale, è la loro dimensione trasversale.

Riso. 2. Modalità riga e colonna

2. Contenitore flessibile

Un contenitore flessibile crea un nuovo contesto di formattazione flessibile per il suo contenuto. Un contenitore flessibile non è un contenitore a blocchi, quindi le proprietà CSS come float, clear, vertical-align non funzionano per gli elementi figlio. Inoltre, il contenitore flex non è influenzato dalle proprietà column-*, che creano colonne nel testo e gli pseudo-elementi :: first-line e :: first-letter.

Il modello di layout flexbox è associato a un valore specifico nella proprietà CSS di visualizzazione dell'elemento html padre che contiene le caselle figlio. Per controllare gli elementi utilizzando questo modello, è necessario impostare la proprietà di visualizzazione come segue:

Flex-container (/ * genera un contenitore flessibile a livello di blocco * / display: -webkit-flex; display: flex;). Flex-container (/ * genera un contenitore flessibile a livello di riga * / display: -webkit-inline- flex; display: inline-flex;)

Dopo aver impostato questi valori di proprietà, ogni figlio diventa automaticamente un elemento flessibile, allineandosi in una riga (lungo l'asse principale). Tuttavia, i bambini bloccati e in linea si comportano allo stesso modo, ad es. la larghezza dei blocchi è uguale alla larghezza del loro contenuto, tenendo conto del riempimento e dei bordi dell'elemento.

Riso. 3. Allineamento degli elementi nel modello flexbox

Se il blocco padre contiene testo o immagini senza wrapper, diventano elementi flessibili anonimi. Il testo è allineato al bordo superiore del blocco contenitore e l'altezza dell'immagine diventa uguale all'altezza del blocco, ad es. si deforma.

3. Articoli flessibili

Gli elementi flessibili sono blocchi che rappresentano il contenuto di un contenitore flessibile nel flusso. Un contenitore flessibile imposta un nuovo contesto di formattazione per il suo contenuto che fornisce le seguenti funzionalità:

Per gli elementi flessibili, il valore della proprietà di visualizzazione è bloccato. Valore visualizzato: blocco in linea; e display: cella-tabella; valutato a display: blocco; ...
Lo spazio bianco tra gli elementi scompare: non diventa il proprio elemento flessibile, anche se il testo tra elementi è avvolto in un elemento flessibile anonimo. Il contenuto di un elemento flessibile anonimo non può essere definito da solo, ma lo erediterà (come le impostazioni dei caratteri) dal contenitore flessibile.
Un elemento flessibile posizionato in modo assoluto non partecipa al layout di un layout flessibile.
I campi dei margini degli elementi flessibili adiacenti non vengono compressi.
Le percentuali di margine e riempimento vengono calcolate dalla dimensione interna del blocco contenitore.
margine: automatico; espandersi, assorbendo ulteriore spazio nella dimensione corrispondente. Possono essere utilizzati per allineare o espandere elementi flessibili adiacenti.
La dimensione minima automatica predefinita per gli elementi flessibili è la dimensione minima del suo contenuto, ovvero min-width: auto; ... Per i contenitori a scorrimento, la dimensione minima automatica è solitamente zero.

4. Visualizza l'ordine degli elementi flessibili e l'orientamento

Il contenuto di un contenitore flessibile può essere disposto in qualsiasi direzione e in qualsiasi ordine (riordinare gli elementi flessibili all'interno del contenitore influisce solo sul rendering visivo).

4.1. Direzione dell'asse principale: direzione di flessione

La proprietà è specifica del contenitore flessibile. Controlla la direzione dell'asse principale lungo il quale gli elementi flessibili sono impilati in base alla modalità di scrittura corrente. Non ereditato.

direzione di flessione
Valori:
riga	L'impostazione predefinita è da sinistra a destra (in rtl, da destra a sinistra). Gli articoli flessibili sono disposti su una linea. Le direzioni di inizio principale e fine principale dell'asse principale corrispondono all'inizio in linea e alla fine in linea dell'asse in linea.
riga inversa	Direzione da destra a sinistra (in rtl da sinistra a destra). Gli elementi flessibili sono disposti in linea rispetto al bordo destro del contenitore (in rtl - sinistro).
colonna	Direzione dall'alto verso il basso. Gli elementi flessibili sono disposti in una colonna.
colonna inversa	Colonna con elementi in ordine inverso, dal basso verso l'alto.
iniziale
ereditare

Riso. 4. La proprietà flex-direction per le lingue da sinistra a destra

Sintassi

Contenitore flessibile (display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse;)

4.2. Controllo della multilinea di un contenitore flessibile: flex-wrap

La proprietà determina se il contenitore flessibile sarà a riga singola o multiriga e imposta anche la direzione dell'asse trasversale, che determina la direzione in cui vengono impilate le nuove righe del contenitore flessibile.

Per impostazione predefinita, gli elementi flessibili sono impilati su una riga, lungo l'asse principale. Se traboccano, escono dal riquadro di delimitazione del contenitore flessibile. La proprietà non è ereditata.

Riso. 5. Controllo di più righe con la proprietà Flex-Wrap per i linguaggi LTR

Sintassi

Contenitore flessibile (display: -webkit-flex; -webkit-flex-wrap: avvolgere; display: flex; flex-wrap: avvolgere;)

4.3. Una scorciatoia per direzione e multilinea: flex-flow

La proprietà consente di definire le direzioni degli assi principale e trasversale, nonché la possibilità di avvolgere elementi flessibili su più righe, se necessario. È una scorciatoia per le proprietà flex-direction e flex-wrap. Flusso flessibile predefinito: riga nowrap; ... la proprietà non è ereditata.

Sintassi

Contenitore flessibile (display: -webkit-flex; -webkit-flex-flow: a capo riga; display: flex; flex-flow: a capo riga;)

4.4. Visualizza l'ordine degli articoli flessibili: ordine

La proprietà determina l'ordine in cui gli elementi flessibili vengono visualizzati e posizionati all'interno del contenitore flessibile. Si applica agli articoli flessibili. La proprietà non è ereditata.

Inizialmente, tutti gli elementi flessibili hanno un ordine: 0; ... Se specifichi un valore compreso tra -1 per un elemento, si sposta all'inizio della sequenza temporale e un valore di 1 alla fine. Se più articoli flessibili hanno lo stesso valore dell'ordine, verranno visualizzati in base al loro ordine originale.

Sintassi

Contenitore flessibile (display: -webkit-flex; display: flex;) .flex-item (-webkit-order: 1; order: 1;)
Riso. 6. Visualizza l'ordine degli articoli flessibili

5. Flessibilità degli articoli flessibili

Un aspetto che definisce il layout flessibile è la capacità di "piegare" gli elementi flessibili modificando la loro larghezza/altezza (a seconda di quale dimensione si trova sull'asse principale) per riempire lo spazio disponibile nella dimensione di base. Questo viene fatto usando la proprietà flex. Un contenitore flessibile alloca lo spazio libero tra i suoi figli (in proporzione al loro rapporto di flessibilità-crescita) per riempire il contenitore o li riduce (in proporzione al loro rapporto di flessibilità-restringimento) per evitare che trabocchi.

Un elemento flessibile sarà completamente inflessibile se i suoi valori flex-grow e flex-shrink sono zero, altrimenti si fletterà.

5.1. Dimensionamento flessibile con una proprietà: flex

La proprietà è una scorciatoia per le proprietà flex-grow, flex-shrink e flex-base. Valore predefinito: flex: 0 1 auto; ... È possibile specificare uno o tutti e tre i valori delle proprietà. La proprietà non è ereditata.

Sintassi

Contenitore flessibile (display: -webkit-flex; display: flex;) .flex-item (-webkit-flex: 3 1 100 px; -ms-flex: 3 1 100 px; flex: 3 1 100 px;)

5.2. Tasso di crescita: flex-grow

La proprietà controlla quanto crescerà un elemento flessibile rispetto ad altri elementi flessibili in un contenitore flessibile durante l'allocazione di uno spazio bianco positivo. Se la somma dei valori flex-grow degli elementi flex su una riga è inferiore a 1, occupano meno del 100% dello spazio libero. La proprietà non è ereditata.

Riso. 7. Gestire lo spazio libero nella barra di navigazione con flex-grow

Sintassi

Contenitore flessibile (display: -webkit-flex; display: flex;). Flex-item (-webkit-flex-grow: 3; flex-grow: 3;)

5.3. Rapporto di restringimento: flex-shrink

La proprietà specifica di quanto un elemento flessibile si ridurrà rispetto ad altri elementi flessibili durante l'allocazione di spazi vuoti negativi. Moltiplicato per la dimensione della base della base flessibile. Lo spazio negativo viene allocato in proporzione a quanto l'elemento può ridursi, quindi, ad esempio, un elemento flessibile piccolo non si ridurrà a zero finché un elemento flessibile più grande non sarà visibilmente ridotto. La proprietà non è ereditata.

Riso. 8. Restringere gli elementi flessibili di fila

Sintassi

Contenitore flessibile (display: -webkit-flex; display: flex;). Flex-item (-webkit-flex-shrink: 3; flex-shrink: 3;)

5.4. Dimensioni della base: base flessibile

La proprietà imposta la dimensione di base iniziale dell'elemento flessibile prima che lo spazio libero venga allocato in base ai rapporti flessibili. Per tutti i valori eccetto auto e content, la dimensione flessibile di base è definita allo stesso modo della larghezza nelle modalità di scrittura orizzontale. Le percentuali sono relative alla dimensione del contenitore flessibile e, se non viene specificata alcuna dimensione, il valore utilizzato per base flessibile è la dimensione del suo contenuto. Non ereditato.

Sintassi

Contenitore flessibile (display: -webkit-flex; display: flex;) Elemento flessibile (-webkit-flex-basis: 100px; flex-basis: 100px;)

6. Allineamento

6.1. Allineamento dell'asse principale: giustifica-contenuto

La proprietà allinea gli elementi flessibili all'asse principale del contenitore flessibile distribuendo lo spazio libero non occupato dagli elementi flessibili. Quando un elemento viene convertito in un contenitore flessibile, gli elementi flessibili vengono raggruppati per impostazione predefinita (a meno che non abbiano un margine impostato per loro). La spaziatura viene aggiunta dopo aver calcolato i valori di margine e flessione-crescita. Se alcuni elementi hanno flex-grow o margine diverso da zero: auto; , la proprietà non avrà alcun effetto. La proprietà non è ereditata.


Valori:
flex-start	Valore predefinito. Gli elementi flessibili sono disposti in una direzione lontana dalla linea di partenza del contenitore flessibile.
flex-end	Gli elementi flessibili sono disposti in una direzione lontana dalla linea finale del contenitore flessibile.
centro	Gli elementi flessibili sono allineati al centro del contenitore flessibile.
spazio-tra	Gli articoli Flex sono distribuiti uniformemente lungo la linea. Il primo elemento flessibile è posizionato a filo con il bordo della linea iniziale, l'ultimo elemento flessibile è a filo con il bordo della linea finale e il resto degli elementi flessibili sulla linea sono distanziati in modo che lo spazio tra due elementi adiacenti è la stessa. Se lo spazio vuoto rimanente è negativo o se è presente un solo elemento flessibile per riga, questo valore è identico al parametro flex-start.
spazio-intorno	Gli elementi flessibili su una linea sono distanziati in modo che la distanza tra due elementi flessibili adiacenti sia la stessa e la distanza tra il primo/ultimo elemento flessibile e i bordi del contenitore flessibile sia metà della distanza tra gli elementi flessibili.
iniziale	Imposta il valore della proprietà sul valore predefinito.
ereditare	Eredita il valore della proprietà dall'elemento padre.

Riso. 9. Allineamento degli elementi e assegnazione dello spazio libero utilizzando la proprietà Justify-Content

Sintassi

Contenitore flessibile (display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; require-content: flex-start;)

6.2. Allineamento degli assi incrociati: allinea-oggetti e allinea-auto

Gli elementi flessibili possono essere allineati all'asse trasversale della riga corrente del contenitore flessibile. align-items imposta l'allineamento per tutti gli elementi del contenitore flessibile, inclusi gli elementi flessibili anonimi. align-self ti consente di ignorare questo allineamento per i singoli elementi flessibili. Se uno dei margini trasversali dell'elemento flessibile è automatico, align-self non ha effetto.

6.2.1. Allinea-oggetti

Allinea gli elementi flessibili, inclusi gli elementi flessibili anonimi, lungo l'asse trasversale. Non ereditato.


Valori:
flex-start
flex-end
centro
linea di base	Le linee di base di tutti gli elementi flessibili coinvolti nell'allineamento sono le stesse.
allungare
iniziale	Imposta il valore della proprietà sul valore predefinito.
ereditare	Eredita il valore della proprietà dall'elemento padre.

Riso. 10. Allineare verticalmente gli oggetti nel contenitore

Sintassi

Contenitore flessibile (display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start;)

6.2.2. Allinea-sé

La proprietà è responsabile dell'allineamento di un singolo elemento flessibile all'altezza del contenitore flessibile. Sostituisce l'allineamento specificato da align-items. Non ereditato.


Valori:
auto	Valore predefinito. L'elemento flex utilizza l'allineamento specificato nella proprietà align-items del contenitore flex.
flex-start	Il bordo superiore dell'elemento flessibile è posizionato a filo con la linea flessibile (o la spaziatura, dati il margine e il bordo specificati dell'elemento) che attraversa l'origine dell'asse trasversale.
flex-end	Il bordo inferiore dell'elemento flessibile è posizionato a filo con la linea flessibile (o la spaziatura, dati il margine e il bordo specificati dell'elemento) che attraversa l'estremità dell'asse trasversale.
centro	I margini dell'elemento flessibile sono centrati sull'asse trasversale all'interno della linea flessibile.
linea di base	L'elemento flessibile è allineato alla linea di base.
allungare	Se il ridimensionamento incrociato dell'elemento flessibile è automatico e nessuno dei margini incrociati è automatico, l'elemento viene allungato. Valore predefinito.
iniziale	Imposta il valore della proprietà sul valore predefinito.
ereditare	Eredita il valore della proprietà dall'elemento padre.

Riso. 11. Allinea i singoli elementi flessibili

Sintassi

Contenitore flessibile (display: -webkit-flex; display: flex;). Flex-item (-webkit-align-self: center; align-self: center;)

6.3. Allineare le righe di un contenitore flessibile: align-content

La proprietà allinea le righe in un contenitore flessibile quando è presente spazio aggiuntivo sull'asse trasversale, in modo simile all'allineamento di singoli elementi sull'asse principale utilizzando la proprietà giustifica-contenuto. La proprietà non ha effetto sul contenitore flessibile a una riga. Non ereditato.


Valori:
flex-start	Le linee vengono impilate verso l'inizio del contenitore flessibile. Il bordo della prima linea è posizionato vicino al bordo del contenitore flessibile, ogni linea successiva è posizionata vicino alla linea precedente.
flex-end	Le linee sono impilate verso la fine del contenitore flessibile. Il bordo dell'ultima riga viene posizionato vicino al bordo del contenitore flessibile, ogni riga precedente viene posizionata vicino alla riga successiva.
centro	Le linee sono impilate verso il centro del contenitore flessibile. Le righe sono vicine l'una all'altra e allineate al centro del contenitore flessibile con spaziatura uguale tra il bordo iniziale del contenuto del contenitore flessibile e la prima riga e tra il bordo finale del contenuto del contenitore flessibile e l'ultima riga.
spazio-tra	Le righe sono distanziate uniformemente nel contenitore flessibile. Se lo spazio libero rimanente è negativo o c'è solo una linea flessibile nel contenitore flessibile, questo valore è identico a flex-start. In caso contrario, il bordo della prima riga viene posizionato vicino al bordo iniziale del contenuto del contenitore flessibile e il bordo dell'ultima riga viene posizionato vicino al bordo finale del contenuto del contenitore flessibile. Il resto delle linee è distribuito in modo che la distanza tra due linee adiacenti sia la stessa.
spazio-intorno	Le linee sono distanziate uniformemente in un contenitore flessibile con metà spazio ad entrambe le estremità. Se lo spazio libero rimanente è negativo, questo valore è identico al centro cent. In caso contrario, le linee sono distanziate in modo che la spaziatura tra due linee adiacenti qualsiasi sia la stessa e la spaziatura tra la prima/l'ultima riga e i bordi del contenuto del contenitore flessibile sia metà della spaziatura tra le righe.
allungare	Valore predefinito. Righe di elementi flessibili si estendono uniformemente per riempire tutto lo spazio disponibile. Se lo spazio libero rimanente è negativo, questo valore è identico a flex-start. In caso contrario, lo spazio libero verrà diviso equamente tra tutte le linee, aumentando la loro dimensione laterale.
iniziale	Imposta il valore della proprietà sul valore predefinito.
ereditare	Eredita il valore della proprietà dall'elemento padre.

Riso. 12. Allineamento multilinea di elementi flessibili

Sintassi

Contenitore flessibile (display: -webkit-flex; -webkit-flex-flow: a capo riga; -webkit-align-content: flex-end; display: flex; flex-flow: a capo riga; align-content: flex-end ; altezza: 100px;)

Uno dei motivi per cui flexbox ha catturato rapidamente l'interesse degli sviluppatori web è che ha portato per la prima volta sul web funzionalità di allineamento adeguate. Ha consentito un corretto allineamento verticale, quindi possiamo finalmente centrare facilmente una scatola. In questa guida, daremo un'occhiata approfondita a come funzionano le proprietà di allineamento e giustificazione in Flexbox.

Per centrare il nostro riquadro usiamo la proprietà align-items per allineare il nostro oggetto sull'asse trasversale, che in questo caso è l'asse del blocco che corre verticalmente. Usiamo il contenuto giustificato per allineare l'elemento sull'asse principale, che in questo caso l'asse in linea scorre orizzontalmente.

Puoi dare un'occhiata al codice di questo esempio qui sotto. Modifica la dimensione del contenitore o dell'elemento nidificato e l'elemento nidificato rimane sempre centrato.

Proprietà che controllano l'allineamento

Le proprietà che esamineremo in questa guida sono le seguenti.

giustifica-contenuto - controlla l'allineamento di tutti gli elementi sull'asse principale.
align-items - controlla l'allineamento di tutti gli elementi sull'asse trasversale.
align-self - controlla l'allineamento di un singolo elemento flessibile sull'asse trasversale.
align-content - descritto nelle specifiche come per "packing flex lines"; controlla lo spazio tra le linee flessibili sull'asse trasversale.

Scopriremo anche come utilizzare i margini automatici per l'allineamento in flexbox.

Nota: Le proprietà di allineamento in Flexbox sono state inserite nelle loro specifiche - CSS Box Alignment Level 3. Si prevede che questa specifica alla fine sostituirà le proprietà definite in Flexbox Level One.

L'asse trasversale

Le proprietà align-items e align-self controllano l'allineamento dei nostri elementi flessibili sull'asse trasversale, lungo le colonne se flex-direction è riga e lungo la riga se flex-direction è colonna.

Utilizziamo l'allineamento degli assi incrociati nell'esempio flessibile più semplice. Se aggiungiamo display: flex a un contenitore, gli elementi figlio diventano tutti elementi flex disposti in fila. Si allungheranno tutti fino a raggiungere l'altezza dell'elemento più alto, poiché quell'elemento definisce l'altezza degli elementi sull'asse trasversale. Se il tuo contenitore flessibile ha un'altezza impostata, gli elementi si allungheranno fino a quell'altezza, indipendentemente dalla quantità di contenuto nell'elemento.

Il motivo per cui gli elementi diventano della stessa altezza è che il valore iniziale di align-items, la proprietà che controlla l'allineamento sull'asse trasversale, è impostato su stretch.

Possiamo usare altri valori per controllare come si allineano gli elementi:

allinea-oggetti: flex-start
allinea-oggetti: flex-end
allinea-elementi: centro
allineare gli oggetti: stretch
allineare gli elementi: linea di base

Nell'esempio dal vivo qui sotto, il valore di align-items è stretch. Prova gli altri valori e osserva come tutti gli elementi si allineano l'uno contro l'altro nel contenitore flessibile.

Allineare un oggetto con align-self

La proprietà align-items imposta la proprietà align-self su tutti gli elementi flessibili come gruppo. Ciò significa che puoi dichiarare esplicitamente la proprietà align-self per scegliere come target un singolo elemento. La proprietà align-self accetta tutti gli stessi valori di align-items più un valore di auto, che reimposterà il valore a quello definito sul contenitore flessibile.

In questo prossimo esempio dal vivo, il contenitore flex ha align-item: flex-start, il che significa che gli elementi sono tutti allineati all'inizio dell'asse trasversale. Ho mirato al primo elemento utilizzando un selettore del primo figlio e ho impostato quell'elemento su align-self: stretch; un altro elemento è stato selezionato utilizzando la sua classe di align-self selezionato e assegnato: center. Puoi modificare il valore di align-item o modificare i valori di align-self sui singoli elementi per vedere come funziona.

Modifica dell'asse principale

Finora abbiamo esaminato il comportamento quando la nostra direzione di flessione è riga e mentre lavoriamo in una lingua scritta dall'alto verso il basso. Ciò significa che l'asse principale scorre orizzontalmente lungo la riga e il nostro allineamento dell'asse trasversale sposta gli elementi su e giù.

Se cambiamo la nostra direzione di flessione in colonna, align-items e align-self allineeranno gli elementi a sinistra e a destra.

Puoi provarlo nell'esempio seguente, che ha un contenitore flex con flex-direction: column, ma per il resto è esattamente lo stesso dell'esempio precedente.

Allineare il contenuto sull'asse trasversale: la proprietà align-content

Finora abbiamo allineato gli elementi o un singolo elemento all'interno dell'area definita dal contenitore flessibile. Se disponi di un contenitore flessibile a più righe avvolto, potresti anche voler utilizzare la proprietà align-content per controllare la distribuzione dello spazio tra le righe. Nella specifica questo è descritto come linee flessibili di imballaggio.

Affinché il contenuto di allineamento funzioni, è necessaria una maggiore altezza nel contenitore flessibile rispetto a quella necessaria per visualizzare gli elementi. Quindi funziona su tutti gli elementi come un insieme e determina cosa succede con quello spazio libero e l'allineamento dell'intero insieme di elementi al suo interno.

La proprietà align-content assume i seguenti valori:

allinea-contenuto: flex-start
align-content: flex-end
align-content: center
allinea-contenuto: spazio-tra
align-content: space-around
align-content: stretch
align-content: space-evenly (non definito nella specifica Flexbox)

Nell'esempio dal vivo qui sotto, il contenitore flessibile ha un'altezza di 400 pixel, che è più del necessario per visualizzare i nostri articoli. Il valore di align-content è space-between, il che significa che lo spazio disponibile è condiviso tra le linee flessibili, che sono poste a filo con l'inizio e la fine del contenitore sull'asse trasversale.

Prova gli altri valori per vedere come funziona la proprietà align-content.

Ancora una volta possiamo cambiare la nostra direzione di flessione in colonna per vedere come si comporta questa proprietà quando lavoriamo per colonna. Come prima, abbiamo bisogno di spazio sufficiente nell'asse trasversale per avere dello spazio libero dopo aver visualizzato tutti gli elementi.

Nota: il valore space-evenly non è definito nella specifica flexbox ed è un'aggiunta successiva alla specifica Box Alignment. Il supporto del browser per questo valore non è buono come quello dei valori definiti nelle specifiche flexbox.