CSS3 flexbox

FlexBox CSS (Flexible Box Layout Module ) - è una sistema di markup d'elementi.  Viene composta da  flex-container - il contenitore principale e flex-elementi – elementi in esso incorporati, elementi figli possono essere organizzati in una riga o colonna, e lo spazio rimanente viene distribuito tra loro in vari modi.

Grazie a flexbox elementi si comportano in modo prevedibile su tutti i tipi di dispositivi e schermi di dimensioni diverse. Modello di layout flessibile presenta tanti vantaggi rispetto alla struttura del blocco a causa della assenza d'elementi galleggianti (con la proprietà float) e l'assenza del sovrapposizione del margine margin esterna.

 Flex-elementi figli  possono essere posizionati in qualsiasi direzione e nello stesso tempo hanno dimensioni flessibili, il cio permette a loro di adattarsi alle dimensioni dello schermo. L'ordine iniziale di visualizzazione d'elementi dipende dal loro ordine nel codice sorgente. Cambiare la direzione e l'ordine di visualizzazione d'elementi sia possibili tramite utilizzo delle proprietà flex-direction e order.

Flex-container si comporta come un elemento di blocco in caso display:flex ; o come un elemento in linea  nel caso display: inline-flex;. A seconda delle dimensioni dello schermo, gli elementi nel contenitore si espandono per riempire lo spazio disponibile o si ripicoliscono per evitare la loro fuoriuscita dal contenitore .

Nel modello flexblox per blocchi interni non funzionano certe proprieta  CSS come float, clear, vertical-aligin  Non funziona con flex contenitore la proprieta column-  che crea delle colonne nel testo.

Per impostazione predefinita flex-elementi vengono distribuiti orizzontalmente - lungo l'asse principale main axis  invece  asse trasversale cross axis  interseca la principale. Impostando la direzione del contenuto, è possibile scambiare la direzione di  main axis e cross axis.

Se viene indicato  flex-flow: row; o flex-flow: row-reverse;,  l'asse principale sara messa in  orizzontale e quella trasversale in posizione verticale.
Se si imposta flex-flow: column;  o flex-flow: column-reverse; , l'asse principale sara  in posizione verticale e quella trasversale - in  orizzontale.

box model

Concetto di markup flessibile FlexBox.

 

 

Supporto del browser

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Proprietà di flex-container

1.1. Proprietà display

Il modello di FlexBox-markup è legato al valore delle proprietà CSS display del elemento genitore nella struttura  html continente  in sé i blocchi figli. Per controllare elementi attraverso questo modello è necessario impostare la proprietà display come segue:

.flex-container {
display: -webkit-flex; /* Safari */
display: flex; /*visualizza contenitore come elemento block */
}
.flex-container {
 display: -webkit-inline-flex; /* Safari */
 display: inline-flex; /*visualizza contenitore come elemento in linea */
}

Dopo aver impostato questi valori alla proprietà  ciascun elemento secondario diventa automaticamente flex-elemento, allineandosi in fila  (lungo l'asse principale) in forma delle colonne di uguale altezza pari all'altezza del blocco contenitore. In questo caso elementi block e quelli in linea si  comportano nello stesso modo, cioè, la larghezza dei blocchi  è uguale alla larghezza del loro contenuto mantenendo padding interno degli elementi e spessore dei bordi .

display flex

Se l'unità principale contiene testo o immagini senza una scatola , esso diventano flex-elementi anonimi. Il testo viene allineato al bordo superiore del blocco contenitore, e l'altezza dell'immagine diventa uguale all'altezza del blocco, cioè, si deforma.

1.2. Allineamento degli elementi orizzontali justify-content

Proprietà allinea flex-elementi per la largezza di  flex- contenitore, distribuendo il restante spazio libero non occupato di  flex-elementi. Per allineare gli elementi verticalmente si utilizza la  proprietà align-content . La proprietà non si eredita ereditata.

justify-content
Valore:
flex-start Valore di default. Flex-elementi vengono posizionati dal inizio del flex-contenitore.
flex-end Flex-elementi sono posizionati rispetto al bordo destro del flex-contenitore.
center Flex-elementi sono centrati al centro di flex-contenitore.
space-between Flex-elementi sono allineati lungo l'asse principale, lo spazio tra di loro viene distribuito cosi: il primo blocco si trova all'inizio di flex-contenitore, l'ultimo blocco - alla fine, tutti gli altri blocchi vengono uniformemente distribuiti nello spazio rimanente, e lo spazio libero è distribuito uniformemente tra gli elementi.
space-around Flex-elementi sono allineati lungo l'asse principale, e lo spazio è diviso ugualmente, aggiungendo padding sulla destra e sulla sinistra.
initial Imposta il valore della proprietà al valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.

justify content
Sintassi

.flex-container1 {
display: -webkit-flex;
-webkit-justify-content: flex-start;
display: flex;
justify-content: flex-start;
}

1.3. Allineamento degli elementi  in verticale aligin-items

Proprietà allinea flex-elementi, tra cui flex-elementi anonimi lungo l'asse perpendicolare (in altezza). Non viene ereditato.

align-items
Valore:
stretch Il valore di default. Allunga Flex-Elementi, occupando l'intera altezza dello spazio.
flex-start Flex-elementi sono allineati al bordo sinistro del contenitore-flex e relativamente al bordo superiore del contenitore.
flex-end Flex-elementi sono allineati al bordo sinistro del flex-contenitore è relativamente al bordo inferiore del vano contenitore.
center Flex-elementi sono centrati al centro di flex-contenitore.
baseline Flex-elementi sono allineati lungo la linea di base.
initial Imposta il valore della proprietà al suo valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.

align items

Sintassi

.flex-container {
display: -webkit-flex; /
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}

 

1.4. La direzione della  asse principale flex-direction

Specifica come gli flex -elementi-fit vengono collocati in  flex-container, stabilendo la direzione dell'asse principale del flex-contenitore. Essi possono essere organizzati in due direzioni principali - orizzontalmente come righe e verticalmente come colonne. Asse principale da valore predefinito va da sinistra a destra. E quella verticale - dall'alto verso il basso. La proprietà non si ereditata.

flex-direction
Valore:
row Il valore di default da sinistra a destra (da destra a sinistra in RTL). Flex-elementi sono disposti in una fila. Inizio (main-start) e la fine (main-end) dell'asse maggiore corrisponde all'inizio (inline-start) e la fine (inline-end) del asse in linea (inline-asse).
row-reverse Direzione da destra a sinistra (RTL da sinistra a destra). Flex-elementi sono disposti in una linea rispetto al bordo destro del contenitore (in rtl - sinistro).
column La direzione dall'alto verso il basso. Flex-elementi sono disposti in una colonna.
column-reverse Colonna con gli elementi in ordine inverso, dal basso verso l'alto.
initial Imposta il valore della proprietà al suo valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.

flex direction
Sintassi

.flex-container {
display: -webkit-flex; 
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}

1.5. Elementi multi-linea flex-wrap

Proprietà controlla come il Flex-contenitore distribuisce flex-elementi in una singola riga o in più rige, e la direzione in cui saranno messe le rige nuove. Per default flex-elementi sono messi in una riga. Quando il contenitore è pieno, il suo contenuto ecse  oltre i confini di flex-elementi. Non si eredita.

flex-wrap
Valore:
nowrap Il valore di default. Flex-elementi non vengono trasferiti, ma messi in una linea da sinistra a destra (da destra a sinistra in RTL).
wrap Flex-elementi vengono trasferiti, stabilendosi in diversi file orizzontali (se non si ci stano in una sola riga) da sinistra a destra (da destra a sinistra, RTL).
wrap-reverse Flex-elementi vengono trasferiti ecollocati in ordine inverso, da sinistra a destra, e il trasferimento avviene dal basso verso l'alto.
initial Imposta il valore della proprietà al suo valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.


flex wrap

Sintassi

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

1.7. Allineamento multilinea align-content

Proprietà allinea flex-elementi in verticale nel flex-contenitore, consentendo di gestire lo spazio libero.
La proprietà funziona solo se è consentito il trasferimento di flex elementi nella riga sucesiva  e indicata la direzione flex-flow: row/row-reverse/column/column-reverse wrap/wrap-reverse;  e l'altezza del flex-contenitore. Non viene ereditato.

align-content
Valore:
flex-start Le rige di flex-elementi sono allineati al bordo sinistro del contenitore-flex e relativamente al bordo superiore del bloco contenitore.
flex-end Le rige di flex-elementi sono allineati al bordo sinistro del contenitore-flex e relativamente al bordo inferiore del bloco contenitore.
center Le rige di flex-elementi sono allineati in altezza al centro del flex-contenitore rispetto al suo bordo sinistro.
space-between Rige di flex-elementi sono allineati in altezza al centro del flex-contenitore rispetto al suo bordo sinistro. Lo spazio libero viene distribuito fra di essi. La prima fila di flex-elementi viene attacato alla parte superiore di flex-contenitore, ultima fila - al bordo inferiore.
space-around Rige di Flex-elementi vengono uniformemente distribuite in altezza e lo spazio libero viene aggiunto alle rige sopra e sotto.
stretch Il valore di default. Rige di flex-elementi vengono uniformemente allungati per riempire lo spazio disponibile.
initial Imposta il valore della proprietà al suo valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.

align content
Sintassi
.flex-container {
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: flex-end; 
display: flex;
flex-flow: row wrap;
align-content: flex-end;
height: 100px;
}

 

2. Proprietà di Flex-elementi

2.1. L'ordine di visualizzazione degli elementi order.

Proprietà determina l'ordine in cui vengono visualizzati gli flex-elementi nel flex-contenitore. Per impostazione predefinita, per tutti gli flex-elementi viene impostato ordine order: 0;  ed esso si susseguono mano mano che si aggiungono in flex-contenitore. Il primo flex-elemento di default si trova sulla sinistra. Per mettere qualsiasi flex-elemento all'inizio della riga, ad esso dobimo atribuire  order: -1; , nella fine della riga  - order: 1; . La proprietà non si ereditata.

order
Valore:  
numero La proprieta viene definita da un numero intero corrispondente all'ordine di visualizzazione flex-elementi. Il valore di default è 0.
initial Imposta il valore della proprietà al suo valore di default.
inherit Valore della proprietà vine eredita dal elemento genitore.

Sintassi

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-order: 1;
order: 1;
}

order

2.2. Larghezza base del elemento flex-basis

La proprietà consente di specificare la larghezza della flex-elemento base, rispetto al quale sarà eseguito allargamento flex-grow  o restringimento del  elemento flex-shrink . Non si eredita.

flex-basis
Valore:  
numero La larghezza dell'elemento viene impostata in px, %, em e in altri unita di misuarzione
auto Il valore di default. Elemento riceve una larghezza di base corrispondente alla larghezza del suo contenuto, se non viene impostata esplicitamente.
initial Imposta il valore della proprietà al suo valore di default.
inherit Valore della proprietà vine eredita dal elemento genitore.

Sintassi

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-basis: 100px; 
flex-basis: 100px;
}

2.3. Allargamento degli elementi flex-grow.

La proprieta specifica il coeficiente di allargamento della largezza di flex-elemento rispetto altri flex-elementi. La proprietà non si eredita.

flex-grow
Valore:  
numero Un numero intero positivo o numero frazionario che imposta l'ingrandimento di flex-elemento. valore di default 0.
initial Imposta il valore della proprietà al suo valore di default.
inherit Valore della proprietà vine eredita dal elemento genitore.

flex grow

 

2.4. Restringimento d'elementi flex-shrink

 

Proprietà specifica il coefficiente di restringimento di  flex-elemento rispetto altri  flex-elementi. Funziona solo se per l'elemento è stata indicata larghezza tramite  valori  flex-basis o width. La proprietà non si ereditata.

flex-shrink
Valore:  
numero Un numero intero positivo o numero frazionario, che stabilisce il coeficiente di riduzione di un flex-elemento. Il valore predefinito è 1.
initial Imposta il valore della proprietà al valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.

flex shrink
Sintassi

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-shrink: 3; 
flex-shrink: 3;
}

2.5. Impostare la larghezza di base e la trasformazione di un elemento tramite unica proprieta flex.

La proprieta rapresenta una notazione abbreviata  di flex-grow, flex-shrink  e flex-basis. Valore predefinito: flex: 0 1 auto; . È possibile specificare uno o tutti i tre  valori delle proprietà. La proprietà non si ereditata.

W3C consiglia di utilizzare una notazione abbreviata, dato che  resetta in modo corretto tutti i valori non specificati.

flex
Valore:  
Coeficiente di allargamento Coeficiente aumenta la larghezza di un flex-elemento rispetto agli altri flex-elementi.
Coeficiente di restrigimento Coefficiente di restringimento di un flex-elemento relativamente agli altri flex-elementi.
largezza di base Largezza di base di un flex-elemento.
auto Uguale a flex: 1 1 auto;.
none Uguale a flex: 0 0 auto;.
initial Imposta il valore della proprietà al valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.

Sintassi

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex: 3 1 100px; 
-ms-flex:  3 1 100px; 
flex:  3 1 100px;
}

2.6. Allineamento di singoli elementi align-self

La proprietà stabilisce come allineare un singolo flex-elemento rispetto altezza di flex-contenitore esso continente . Sostituisce allineamento specificato da align-items . Non viene ereditato.

align-self
Valore:
auto Valore di default. Flex-elemento utilizza l'allineamento specificato nella proprietà align-items flex-contenitore.
flex-start Flex-elemento viene allineato al bordo superiore del flex-contenitore, rispetto bordo sinistro .
flex-end Flex-elemento viene allineato al bordo inferiore del flex-contenitore, rispetto bordo sinistro.
center Flex-elemento viene allineato al centro per altezza del flex-contenitore, rispetto bordo sinistro.
baseline Flex-elemento viene allineato lungo la linea di base del flex-contenitore, rispetto bordo sinistro.
stretch Flex-elemento si estende per tutta l'altezza del flex-contenitore, in questo caso vengono presi in calcoli margin e padding.
initial Imposta il valore della proprietà al valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.

align self
Sintassi

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-align-self: center; 
align-self: center;
}

 

Letto 923 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso