Flex - Trucchi CSS

La flexproprietà è una proprietà secondaria del modulo Layout riquadro flessibile.

Questa è la scorciatoia per flex-grow, flex-shrinke flex-basis. Il secondo e il terzo parametro ( flex-shrinke flex-basis) sono opzionali.

Sintassi

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Ecco lo scoop su ciò a cui i valori si riferiscono a seconda di quanti valori gli dai:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Valori comuni per flex

flex: 0 auto;

Questa è la stessa flex: initial;e la scorciatoia per il valore di default: flex: 0 1 auto. Dimensiona l'elemento in base alle sue width/ heightproprietà (o al suo contenuto se non impostato).

Rende l'elemento flessibile non flessibile quando è rimasto dello spazio libero, ma gli consente di ridursi al minimo quando non c'è abbastanza spazio. Le capacità oi automargini di allineamento possono essere utilizzati per allineare gli elementi flessibili lungo l'asse principale.

flex: auto;

Questo è equivalente a flex: 1 1 auto. Attenzione, questo non è il valore predefinito. Dimensiona l'oggetto in base alle sue proprietà width/ height, ma lo rende completamente flessibile in modo che assorbano lo spazio extra lungo l'asse principale.

Se tutti gli elementi sono o flex: auto, flex: initialo flex: none, qualsiasi spazio che residua dopo le voci sono state dimensionate sarà distribuito in modo uniforme per gli elementi con flex: auto.

flex: nessuno;

Questo è equivalente a flex: 0 0 auto. Dimensiona l'articolo in base alle sue width/ heightproprietà, ma lo rende completamente rigido.

Questo è simile a flex: initialtranne che non è consentito ridursi, anche in una situazione di overflow.

flettere:

Equivalente a flex: 1 0px. Rende l'elemento flessibile flessibile e imposta la base flessibile su zero, risultando in un elemento che riceve la proporzione specificata dello spazio rimanente.

Se tutti gli elementi nel contenitore flessibile utilizzano questo modello, le loro dimensioni saranno proporzionali al fattore di flessibilità specificato.

Demo

La seguente demo mostra un layout molto semplice con Flexbox grazie alla flexproprietà:

Ecco la parte rivelatrice del codice:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Innanzitutto, abbiamo autorizzato la visualizzazione degli elementi flessibili su più righe con flex-flow: row wrap.

Quindi diciamo sia all'intestazione che al piè di pagina di prendere il 100% della larghezza della finestra corrente, qualunque cosa accada.

E il contenuto principale ed entrambe le barre laterali condivideranno la stessa riga, condividendo lo spazio rimanente come segue: 66% (2 / (1 + 2)) per il contenuto principale, 33% (1 / (1 + 2)) per la barra laterale .

Supporto browser

• (moderno) indica la sintassi recente dalla specifica (ad esempio display: flex;)
• (ibrido) indica una strana sintassi non ufficiale del 2011 (es. display: flexbox;)
• (vecchio) indica la vecchia sintassi del 2009 (ad esempio display: box;)

Cromo	Safari	Firefox	musica lirica	IE	Android	iOS
21+ (moderno) 20- (vecchio)	3.1+ (vecchio)	2-21 (vecchio) 22+ (nuovo)	12.1+ (moderno)	10+ (ibrido)	2.1+ (vecchio)	3.2+ (vecchio)

Il browser Blackberry 10+ supporta la nuova sintassi.

Per ulteriori informazioni su come combinare le sintassi al fine di ottenere il miglior supporto del browser, fare riferimento a questo articolo (CSS-Tricks) o questo articolo (DevOpera).