La proprietà align-content imposta il tipo di allineamento delle linee all'interno di un contenitore flessibile lungo l'asse trasversale quando c'è spazio libero.
Si applica a: contenitore flessibile.
Valore di default: stirata.
Le linee Flex-start sono posizionate all'inizio dell'asse trasversale. Ogni riga successiva è a filo con quella precedente. flex-end Le righe vengono posizionate a partire dalla fine dell'asse trasversale. Ogni riga precedente è a filo con la successiva. centro Le linee sono centrate sul contenitore. space-between Le linee sono spaziate uniformemente nel contenitore e la distanza tra loro è la stessa. space-around Le linee sono spaziate uniformemente in modo che lo spazio tra due linee adiacenti sia uguale. Lo spazio bianco prima della prima riga e dopo l'ultima riga è uguale alla metà dello spazio tra due righe adiacenti. space-evenly Le righe sono spaziate in modo uniforme. Lo spazio bianco prima della prima riga e dopo l'ultima riga ha la stessa larghezza delle altre righe. stretch Le linee si allungano uniformemente per riempire lo spazio libero.
La proprietà align-content allinea le linee di un contenitore flessibile all'interno del contenitore flessibile quando c'è spazio extra nell'asse trasversale, in modo simile a come require-content allinea i singoli elementi all'interno dell'asse principale. Nota, questa proprietà non ha effetto su un contenitore flessibile a riga singola. I valori hanno i seguenti significati:
Nota: solo i contenitori flessibili a più righe hanno sempre spazio libero nell'asse trasversale per l'allineamento delle linee, perché in un contenitore flessibile a riga singola la sola linea si allunga automaticamente per riempire lo spazio.
Si applica a: contenitori flessibili.
Iniziale: stirata.
Le linee Flex-start sono imballate verso l'inizio del contenitore flessibile. Il bordo di inizio incrociato della prima linea nel contenitore flessibile è posizionato a filo con il bordo di inizio incrociato del contenitore flessibile e ogni riga successiva è posizionata a filo con la linea precedente. flex-end Le linee sono imballate verso la fine del contenitore flessibile. Il bordo trasversale dell'ultima riga viene posizionato a filo con il bordo terminale del contenitore flessibile e ogni riga precedente viene posizionata a filo con la riga successiva. centro Le linee sono impacchettate verso il centro del contenitore flessibile. Le linee nel contenitore flessibile sono posizionate a filo l'una con l'altra e allineate al centro del contenitore flessibile, con uguali quantità di spazio tra il bordo del contenuto iniziale incrociato del contenitore flessibile e la prima linea nel contenitore flessibile e tra il bordo del contenuto cross-end del contenitore flessibile e l'ultima riga nel contenitore flessibile. (Se lo spazio libero rimanente è negativo, le linee traboccheranno ugualmente in entrambe le direzioni.) Lo spazio tra le linee è distribuito uniformemente nel contenitore flessibile. Se lo spazio libero rimanente è negativo, questo valore è identico a flex-start. In caso contrario, il bordo di inizio incrociato della prima riga nel contenitore flessibile è posizionato a filo con il bordo del contenuto di inizio incrociato del contenitore flessibile, il bordo di estremità incrociata dell'ultima riga nel contenitore flessibile è posizionato a filo con il bordo del contenuto finale del contenitore flessibile e le linee rimanenti nel contenitore flessibile sono distribuite in modo che la spaziatura tra due linee adiacenti qualsiasi sia la stessa. space-around Le linee sono distribuite uniformemente nel contenitore flessibile, con spazi dimezzati su entrambe le estremità. Se lo spazio libero rimanente è negativo, questo valore è identico al centro. Altrimenti, le linee nel contenitore flessibile sono distribuite in modo tale che la spaziatura tra due linee adiacenti qualsiasi sia la stessa e la spaziatura tra le prime/ultime linee e i bordi del contenitore flessibile sia la metà della spaziatura tra le linee flessibili. space-evenly Le linee sono distribuite uniformemente nel contenitore flessibile. Se lo spazio libero rimanente è negativo, questo valore è identico al centro. Altrimenti, le linee nel contenitore flessibile sono distribuite in modo tale che la spaziatura tra ogni linea flessibile sia la stessa. stretch Le linee si allungano per occupare lo spazio rimanente. Se lo spazio libero rimanente è negativo, questo valore è identico a flex-start. Altrimenti, lo spazio libero viene diviso equamente tra tutte le linee, aumentando la loro dimensione trasversale.
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 | |
|---|---|
| I 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 dell'asse 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, questo si sposta all'inizio della sequenza temporale e un valore di 1 fino 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 restringe (in proporzione al loro rapporto di flessibilità-restringimento) per evitare il trabocco.
Un elemento flessibile sarà completamente inflessibile se i suoi valori di 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 Flex (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 articolo viene convertito in un contenitore flessibile, gli articoli flessibili vengono raggruppati insieme 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.
| I valori: | |
| flex-start | Valore di default. 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 sovrascrivere 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.
| I valori: | |
| flex-start | |
| flex-end | |
| centro | |
| linea di base | Le linee di base di tutti gli elementi flessibili coinvolti nell'allineamento sono le stesse. |
| stirata | |
| iniziale | Imposta il valore della proprietà sul valore predefinito. |
| ereditare | Eredita il valore della proprietà dall'elemento padre. |
Riso. 10. Allineamento verticale degli 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.
| I valori: | |
| auto | Valore di default. 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. |
| stirata | Se il ridimensionamento incrociato dell'elemento flessibile è automatico e nessuno dei margini incrociati è automatico, l'elemento viene allungato. Valore di default. |
| 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.
| I 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 linee 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 tale 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. |
| stirata | Valore di default. Le 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: avvolgimento riga; -webkit-align-content: flex-end; display: flex; flex-flow: avvolgimento riga; align-content: flex-end ; altezza: 100px;)
Nulla si ferma, tecnologie e standard si stanno sviluppando, compaiono nuove tecniche e metodi di layout del sito, ad esempio il layout con elementi tabulari, che non abbiamo considerato per ragioni oggettive, è stato sostituito da layout con elementi flottanti.
Molti editor di codice hanno un comodo plug-in per il markup rapido Emmet integrato per impostazione predefinita o disponibile per il download, ti consente di creare il markup principale di questo esempio come segue: sezione> div * 3> lorem+ Tab (valore lorema genera il testo mostrato nell'immagine sottostante).
Tieni presente che con poco sforzo abbiamo ottenuto che le colonne del nostro layout abbiano la stessa altezza indipendentemente dal loro contenuto, il che è fantastico. Gli elementi
non sono elementi flessibili per impostazione predefinita e si trovano nello stream Terzo elemento
Il risultato del nostro esempio:
Contenitore flessibile in linea
Per analogia con gli elementi a blocchi, i contenitori flessibili possono essere in linea. Diamo un'occhiata a qual è la differenza tra i contenitori flessibili in linea e quelli a blocchi. Nell'esempio precedente, abbiamo esaminato l'utilizzo di un contenitore di blocchi, proprio come un normale elemento di blocco, si estende per l'intera larghezza dello schermo e si comporta come un normale elemento a livello di blocco. Per quanto riguarda i contenitori flessibili in linea, diventano elementi in linea regolari pur mantenendo gli elementi flessibili.
Nel prossimo esempio considereremo questa differenza, poiché l'esempio precedente non sarebbe indicativo, per il motivo che la dimensione degli elementi flex figlio non è stata impostata in modo esplicito e, di conseguenza, il nostro contenitore, sia esso in linea o blocco, si comporterebbe allo stesso modo e occuperebbe l'intera larghezza dello schermo.
In questo esempio, abbiamo posto Due minuscolo e Due block flex container, al loro interno abbiamo posizionato cinque elementi
Per generare rapidamente un layout simile utilizzando Emmet digita quanto segue nell'editor: div.inline-flex * 2> div * 5 + Tab, e la stessa cosa con una classe diversa div.flex * 2> div * 5 + Tab.
Dai un'occhiata al risultato del nostro esempio, la differenza tra i contenitori inline e block flex ora dovrebbe essere ovvia per te. Un contenitore in linea si comporta come un elemento in linea e occupa la larghezza richiesta solo dai suoi elementi flex figlio e un contenitore block flex, indipendentemente dalle dimensioni dei suoi figli flex, occupa l'intera larghezza dello schermo.
Il risultato del nostro esempio:
Riso. 205 Un esempio della differenza tra contenitori inline-flex e contenitori flex.
Direzione? Quale direzione?
La direzione degli elementi flessibili è formata in base alla posizione di due assi: asse principale contenitore flessibile e il suo asse trasversale che si trova sempre perpendicolare alla principale... L'asse principale nella direzione ltr (l'attributo HTML globale dir, o la proprietà CSS direction con il valore ltr) è posizionato da sinistra a destra e l'asse trasversale è dall'alto verso il basso (questo è l'impostazione predefinita), per rtl valore è rispecchiato di conseguenza.
In questo articolo, ti guideremo attraverso 5 tecniche per risolvere i problemi di layout CSS di base. Abbiamo anche aggiunto alcuni casi di studio reali per illustrare come possono essere utilizzate queste tecniche.
Rendere le colonne uguali in altezza
All'inizio può sembrare piuttosto semplice, ma a volte questo compito può essere fastidioso. L'uso dell'altezza minima non funzionerà, perché una volta visualizzato del contenuto, le colonne inizieranno immediatamente a ridimensionarsi.
Anche la risoluzione di questo problema con flexbox non è una soluzione, poiché le colonne create con flexbox CSS inizialmente avranno la stessa lunghezza. Abbiamo solo bisogno di introdurre un modello "fluido" e quindi assicurarci che le proprietà flex-direction e align-item siano impostate correttamente.
Riorganizzare gli elementi
Una volta, cambiare dinamicamente l'ordine di alcuni elementi era un'attività che solo JavaScript poteva svolgere. Ma con l'avvento di flexbox, questa difficoltà non si pone più, poiché la soluzione risiede in una sola proprietà CSS.
La proprietà order, che ci consente di utilizzare il layout flexbox, parla da sola. Ci consente di modificare un numero qualsiasi di elementi "flessibili" e la loro sequenza. L'unico parametro di questa proprietà è un numero intero, che determina la posizione di questo elemento, maggiore è il numero, maggiore è la priorità di questo elemento.
La proprietà order ha molti usi. Se vuoi vederne alcuni, puoi dare un'occhiata a questo, in cui utilizziamo questa tecnica per creare una sezione di commenti reattiva.
Centratura orizzontale e verticale
L'allineamento in CSS è ancora un problema piuttosto serio. Anche se ti rivolgi a un motore di ricerca, ti darà un sacco di soluzioni, la maggior parte delle quali offrirà l'uso di tabelle e trasformazioni, il che non è del tutto adatto se parliamo di layout responsive.
Una soluzione semplice sarebbe un layout flexbox, con il quale gli elementi possono essere banalmente spostati lungo il piano delle coordinate, allineandolo a piacimento.
Per vedere questa soluzione in azione e saperne di più, puoi andare a quella nello stesso thread.
Crea griglie completamente reattive
Molti webmaster si affidano a varie librerie e framework CSS per creare griglie reattive. Lo strumento più utilizzato in questo settore è Bootstrap. Tuttavia, non è l'unico nel suo genere. Centinaia di tali assistenti sono già stati sviluppati. Tutti funzionano relativamente bene e vantano una serie impressionante di opzioni, ma non risolveranno mai un problema: è ingombrante. Pertanto, se sei una persona a cui piace fare tutto da solo, o semplicemente non vuoi mettere un intero framework per il bene di una griglia, allora il layout flexbox ti aiuterà!
Una riga in una griglia flexbox è solo un contenitore. Le colonne orizzontali al suo interno possono essere un numero qualsiasi di elementi, la cui dimensione è impostata utilizzando flex. Questo modello si adatterà alle dimensioni di qualsiasi schermo, quindi il risultato finale dovrebbe avere un bell'aspetto sulla maggior parte dei dispositivi. Tuttavia, se decidiamo che non c'è abbastanza spazio sul piano orizzontale, il layout può essere semplicemente trasformato in verticale con una media query.
Puoi vedere la variabilità di questa tecnica nelle istruzioni: Il modo più semplice per creare.
Creare un piè di pagina fisso
Flexbox CSS ha anche una semplice soluzione a questo problema. Creando una pagina che contiene un piè di pagina ancorato scritto tramite elementi flessibili, non devi più preoccuparti che si sposti.
L'applicazione di display: flex al tag body ci consentirà di utilizzare la "modalità flex" durante la creazione dell'intero layout. Quando tutto è pronto, la parte principale della pagina sarà un elemento "flessibile" e il piè di pagina con un altro, questo semplificherà la manipolazione delle loro posizioni.
Troverai maggiori informazioni su questa tecnica nell'articolo "".
Conclusione
La maggior parte dei browser oggi supporta il layout flessibile, il che significa che è sicuro dire che flexbox è pronto per aiutare molti sviluppatori.
Spero che questo articolo ti sia stato utile e che tu abbia migliorato le tue abilità CSS. Buona fortuna!
Le Flexbox sono ideali per creare layout di siti Web ampiamente utilizzati, come il layout a tre colonne, il cosiddetto layout "Santo Graal", in cui tutte le colonne devono essere a tutta altezza, indipendentemente dal loro contenuto. In questo caso, nel codice sorgente, il contenuto principale va prima della navigazione e nella pagina stessa il contenuto principale va dopo la navigazione.
Come questo.
Prima dell'avvento di flexbox, un layout del genere era abbastanza difficile da ottenere senza utilizzare hack. Gli sviluppatori spesso dovevano fare cose come aggiungere markup extra, applicare margini negativi e altri trucchi per allineare correttamente le cose, indipendentemente dal volume del contenuto o dalle dimensioni dello schermo. Ma, come mostra l'esempio sopra, flexbox è molto più semplice.
Ecco una sintesi del codice. In questo esempio, rendiamo l'elemento #main un contenitore flessibile e lasciamo l'intestazione e il piè di pagina come elementi di blocco. In altre parole, solo la parte centrale diventa un flexbox. Ecco uno snippet che lo rende un contenitore flessibile.
#main (display: flex; altezza minima: calc (100vh - 40vh);)
Basta usare display: flex per creare un contenitore flex. Nota che impostiamo anche l'altezza minima utilizzando la funzione calc() e impostiamo #main al 100% dell'altezza della finestra. meno altezza del cappello e del basamento (20vh ciascuno). Ciò garantisce che il layout occupi l'intera altezza dello schermo, anche se il contenuto è scarso. Di conseguenza, il piè di pagina non si alzerà mai e non lascerà spazio vuoto sotto se il contenuto è inferiore all'altezza dello schermo.
Calcolare l'altezza minima è stato abbastanza facile considerando che abbiamo applicato box-sizing: border-box a tutti gli elementi. In caso contrario, dovremmo aggiungere il valore di riempimento alla somma da sottrarre.
Dopo aver installato il contenitore flessibile, ci occupiamo di elementi flessibili.
#main> articolo (flex: 1;) #main> nav, #main> a parte (flex: 0 0 20vw; background: beige;) #main> nav (order: -1;)
La proprietà flex è una scorciatoia per le proprietà flex-grow, flex-shrink e flex-basis. Nel primo caso, abbiamo scritto un solo valore, quindi flex imposta la proprietà flex-grow. Nel secondo caso, abbiamo scritto tutti e tre i valori per
