CSS3 Flexible Box

CSS3 Flexible Box è una nuova modalità di layout.

Lo scopo di introdurre il modello di layout sacca flessibile è quello di fornire un metodo più efficiente per organizzare un contenitore sub-elementi, allineamento e distribuzione dello spazio vuoto.

Supporto per il browser

I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione di proprietà.

Subito dopo il browser il numero -webkit- o il prefisso -moz- specificato.

Contenuto CSS3 Flexible Box

scatola flessibile in un contenitore elastico (contenitore Flex) e le sotto-elementi elastici (voce Flex) Componenti.

contenitore elastico impostando la proprietà display è flessibile o inline-flex sarà definito come il contenitore elastico.

Il contenitore elastica contiene uno o più elastici sottoelementi.

Nota: il contenitore esterno elastico e l'elemento elastico è un bambino di resa normale. scatola flessibile definisce solo il modo resiliente gli elementi figlio all'interno del layout del contenitore elastico.

sub-elemento flessibile di solito è visualizzato nella casella linea elastica. Per impostazione predefinita, ogni contenitore è solo una riga.

Quanto segue mostra l'elemento elastico elementi figlio vengono visualizzati in una riga, da sinistra a destra:

Naturalmente, possiamo modificare la disposizione.

Se si imposta la direction di proprietà di rtl (da destra a sinistra), la disposizione dei sub-elementi elastici cambierà, layout di pagina cambiamento anche seguito:

flex-direzione

flex-direction ordine specifica il sotto-elemento elastico nel contenitore principale.

grammatica

flex-direction: row | row-reverse | column | column-reverse

flex-direction valori sono:

• fila: lateralmente da sinistra a destra (sinistra), la disposizione predefinita.
• row-inverso: indietro lateralmente allineato (giustificato a destra, in avanti dalla fila, l'ultimo in alto.
• colonna: disposizione verticale.
• colonna inversa: invertire disposizione verticale, dalla fila posteriore in avanti, e, infine, una riga in alto.

L'esempio che segue illustra la row-reverse uso:

L'esempio che segue illustra la column utilizzata:

I seguenti esempi dimostrano la column-reverse uso:

attributo giustificare-content

allineamento contenuto (giustificare-contenuto) sulle proprietà elastiche del contenitore delle applicazioni, gli elementi elastici contenitore elastici allineato lungo l'asse principale (asse principale).

sintassi giustificare contenuto è il seguente:

justify-content: flex-start | flex-end | center | space-between | space-around

Ogni analisi del valore:

• flex-start:
  

  progetto flessibile alla prima linea accanto al riempimento. Questa è l'impostazione predefinita. Il primo principale-start dai bordi esterni dell'elemento elastico viene inserito nei bordi principale all'inizio della linea, e il successivo lavaggio, a sua volta messo un termine elastica.

• flex-end:
  

  Un progetto flessibile alla fine della riga successiva al riempimento. I primi elementi principale fascia dall'esterno fili elastici sono posti in bordi main-terminali della linea, e il successivo lavaggio a sua volta collocate una clausola elastica.

• centro:
  

  progetto flessibile centrato vicino da riempire. (Se lo spazio libero rimanente è negativo, il progetto sarà anche traboccare elasticità in entrambe le direzioni).

• spazio tra:
  

  progetto flessibile distribuita uniformemente sulla riga. Se lo spazio è negativo o solo termine elastica, il valore equivalente alla flex-start. Altrimenti, principale inizia dai bordi esterni della prima fila e un allineamento elastica oggetto, mentre la linea principale-end e il margine fascia ultimo un allineamento termine elastica e la distribuzione degli elementi rimanenti sulla linea elastica, adiacente equidistanti articoli.

• spazio-around:
  

  Un progetto flessibile uniformemente distribuita sulla linea, su entrambi i lati della metà sinistra dello spazio. Se lo spazio è negativo o solo termine elastica, il valore è equivalente al centro. Altrimenti, l'elasticità del progetto lungo la linea di distribuzione ed equidistanti tra loro (ad esempio, è 20px), lasciando la metà dell'intervallo (1/2 * 20 px = 10px) tra la testa e la coda su entrambi i lati e contenitore elastico.

Rendering mostrano:

L'esempio seguente dimostra la flex-end uso:

L'esempio seguente dimostra il center utilizzo s ':

I seguenti esempi dimostrano la space-between l'uso di:

I seguenti esempi dimostrano la space-around utilizzare:

align-oggetti di proprietà

align-items impostare o recuperare l'elemento elastico sul lato dell'asse casella (asse verticale) direzione di allineamento.

grammatica

align-items: flex-start | flex-end | center | baseline | stretch

Ogni analisi del valore:

• flex-start: il lato perimetro dell'elemento scatolare asse elastico (asse verticale) contro la posizione iniziale dell'asse del lato in tensione della linea di partenza di confine.
• flex-end: elastica lato boundary dell'asse dell'elemento scatolare (asse verticale) contro la posizione di partenza per vivere estremità dell'albero lato della linea di confine.
• Centro: area elemento elastico disposto nel mezzo dell'asse lato rete (asse verticale) su. (Se la dimensione è inferiore alla dimensione della linea elastica dell'elemento scatolare, è la stessa lunghezza in entrambe le direzioni overflow).
• di base: elementi scatolari quali elastico albero interno e la linea di albero lato è lo stesso, il valore di equivalente 'flex-start'. In altri casi, il valore sarà coinvolto in allineamento basale.
• allungare: Se la dimensione dell'attributo casella margine specifica la dimensione del lato dell'albero è 'auto', il suo valore sarà vicino agli elementi pubblicitari come la dimensione, ma seguirà la proprietà 'min / max-larghezza / altezza' restrizioni.

L'esempio seguente dimostra stretch(默认值) l'uso di:

L'esempio seguente dimostra la flex-start uso:

L'esempio seguente dimostra la flex-end uso:

L'esempio seguente dimostra il center utilizzo s ':

L'esempio seguente mostra la baseline utilizzo:

proprietà flex-wrap

attributoflex-wrap viene utilizzato per specificare una modalità elemento involucro box bambino elastico.

grammatica

flex-flow:  || 

Ogni analisi del valore:

• nowrap - Per impostazione predefinita, il contenitore elastico come una singola linea.In questo caso bambino resilienti possono traboccare contenitore.
• avvolgere - contenitore elastico più linee.parte Overflow del bambino resiliente è collocato in questo caso ad una nuova linea, rottura del cavo interno si verificherà sottochiave
• avvolgere-retromarcia - in ordine inverso involucro.

L'esempio seguente dimostra l' nowrap uso:

L'esempio seguente mostra l' wrap di utilizzo:

L'esempio seguente dimostra l' wrap-reverse uso:

attributo align-content

align-content attributo viene utilizzato per modificare il flex-wrap comportamento attributo. Simili align-items , ma non è impostato l'allineamento dei sub-elementi elastici, ma impostare l'allineamento di ogni riga.

grammatica

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Ogni analisi del valore:

• stretch - default. Ogni linea tenderà ad occupare lo spazio rimanente.
• flex-start - righe di scatole impilate nella posizione iniziale del contenitore elastico.
• flex-end - righe di scatole impilate nella posizione finale del contenitore elastico.
• center - righe di scatole impilate alla posizione centrale del contenitore elastico.
• space-between - il contenitore sacca flessibile ogni riga distribuito uniformemente.
• space-around - ogni riga nel contenitore busta flessibile equamente distribuito tra le due estremità di mantenere la metà dei sotto-elementi e sub-elementi di dimensioni spaziatura.

L'esempio seguente dimostra il center utilizzo s ':

attributi sub-elemento flessibile

sequenza

grammatica

order: 

Ogni analisi del valore:

• <Integer>: un valore intero utilizzato per definire l'ordine in cui il valore ridotto della superficie superiore. Può essere negativo.

order per impostare le proprietà all'interno delle proprietà elastiche degli elementi elastici contenitore figlio:

allineare

Impostazioni "margine" è il valore "auto", ottenere automaticamente il contenitore elastico nello spazio rimanente. Quindi impostare il valore margine verticale di "auto", permette i sub-elementi elastici sono completamente concentrati sulla direzione due assi del contenitore elastico.

I seguenti esempi sono il primo elemento sub-elastico set margin-right: auto; . Lo spazio restante verrà inserito negli elementi giusti:

centro perfetto

Gli esempi che seguono saranno la soluzione perfetta per i problemi che di solito incontriamo centro.

scatola elastico, il centro diventa molto semplice, voglio solo impostare il margin: auto; può fare i sub-elementi elastici in direzione assiale su due perfettamente centrato:

align-auto

align-self attributo viene utilizzato per impostare la direzione di allineamento dell'elemento elastico stesso sul lato dell'asse (asse verticale).

grammatica

align-self: auto | flex-start | flex-end | center | baseline | stretch

Ogni analisi del valore:

• Auto: Se il valore di 'auto' 'align-sé', il valore calcolato di elemento principale dell'elemento 'align-voci' valore, se non ha genitore, il valore calcolato di 'stretch'.
• flex-start: il lato perimetro dell'elemento scatolare asse elastico (asse verticale) contro la posizione iniziale dell'asse del lato in tensione della linea di partenza di confine.
• flex-end: elastica lato boundary dell'asse dell'elemento scatolare (asse verticale) contro la posizione di partenza per vivere estremità dell'albero lato della linea di confine.
• Centro: area elemento elastico disposto nel mezzo dell'asse lato rete (asse verticale) su. (Se la dimensione è inferiore alla dimensione della linea elastica dell'elemento scatolare, è la stessa lunghezza in entrambe le direzioni overflow).
• di base: elementi scatolari quali elastico albero interno e la linea di albero lato è lo stesso, il valore di equivalente 'flex-start'. In altri casi, il valore sarà coinvolto in allineamento basale.
• allungare: Se la dimensione dell'attributo casella margine specifica la dimensione del lato dell'albero è 'auto', il suo valore sarà vicino agli elementi pubblicitari come la dimensione, ma seguirà la proprietà 'min / max-larghezza / altezza' restrizioni.

L'esempio seguente mostra i sotto-elementi elastici allineare sé effetto applicazione di valori diversi:

flettere

flex attributo viene utilizzato per specificare come allocare lo spazio per i sotto-elementi elastici.

grammatica

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Ogni analisi del valore:

• nessuno: nessuno calcolare parola chiave è: 0 0 auto
• [Flex-crescere]: definizione del rapporto di espansione scatola elemento elastico.
• [Flex-shrink]: definizione del rapporto di restringimento scatola elemento elastico.
• [Flex-base]: Il valore di riferimento di default definisce l'elemento elastico della scatola.

Nel seguente esempio, un primo elemento sub-elastico occupa 2/4 dello spazio, le altre due ogni 1/4 Spazio:

Altri esempi

Creare una pagina di risposta utilizzando una scatola elastica

CSS3 flessibili Proprietà casella

La seguente tabella elenca comunemente utilizzati alla casella nelle proprietà elastiche: