CSS3 Flexbox
Scatole flessibili, o flexbox , è una nuova modalità di layout in CSS3.
L'utilizzo di flexbox assicura che gli elementi si comportano prevedibile quando il layout della pagina deve ospitare schermi di dimensioni diverse e diversi dispositivi di visualizzazione.
Per molte applicazioni, il box model flessibile fornisce un miglioramento rispetto al modello di blocco nel senso che non fa uso di carri, né i margini crollo del contenitore flessibile con i margini del suo contenuto.
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la funzione.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox Concetti
Flexbox è costituito da contenitori Flex e gli elementi di flessione.
Un contenitore flessibile è dichiarato impostando la display di proprietà di un elemento a uno flex (reso come un blocco) o inline-flex (reso come in linea).
All'interno di un contenitore flessibile vi è uno o più elementi di flessione.
Nota: Tutto al di fuori di un contenitore flessibile e dentro un elemento di flessione è reso come al solito. Flexbox definisce come elementi flex sono disposti all'interno di un contenitore flessibile.
articoli Flex sono posizionati all'interno di un contenitore flessibile lungo una linea flessibile. Per impostazione predefinita, non vi è una sola linea flessibile per contenitore flessibile.
L'esempio seguente mostra tre elementi flessibili. Essi sono posizionati in modo predefinito: lungo la linea di flessione orizzontale, da sinistra a destra:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>E 'anche possibile cambiare la direzione della linea di flessione.
Se si imposta la direction di proprietà di rtl (da destra a sinistra), il testo è disegnato da destra a sinistra, e anche la linea flex cambia direzione, che cambierà il layout di pagina:
Esempio
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} Direzione Flex
La flex-direction proprietà specifica la direzione degli elementi flessibili all'interno del contenitore flessibile. Il valore predefinito di flex-direction è row (da sinistra a destra, dall'alto verso il basso).
Gli altri valori sono i seguenti:
-
row-reverse- Se la scrittura-mode (direzione) è da sinistra a destra, gli elementi flessibili saranno disposti da destra a sinistra -
column- Se il sistema di scrittura è orizzontale, gli elementi flessibili saranno disposti verticalmente -
column-reverse- Come colonna, ma invertita
L'esempio seguente mostra il risultato dell'utilizzo del row-reverse valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando la column valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando la column-reverse valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} La giustificare-contenuti Proprietà
La justify-content proprietà allinea orizzontalmente gli elementi del contenitore flessibile quando gli elementi non utilizzare tutto lo spazio disponibile sul principale asse.
I valori possibili sono i seguenti:
-
flex-start- Valore di default. Gli articoli sono posizionati all'inizio del contenitore -
flex-end- articoli sono posizionate alla fine del contenitore -
center- articoli sono posizionati al centro del contenitore -
space-between- Gli articoli sono disposti con lo spazio tra le linee -
space-around- articoli sono posizionati con spazio prima, tra e dopo le righe
L'esempio seguente mostra il risultato utilizzando il flex-end valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando il center valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato dell'utilizzo space-between valori:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato dell'utilizzo space-around value:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} I align-oggetti di proprietà
Il align-items proprietà allinea verticalmente gli elementi del contenitore flessibile quando gli elementi non utilizzare tutto lo spazio disponibile sulla croce asse.
I valori possibili sono i seguenti:
-
stretch- Il valore di default. Gli articoli sono allungati per adattarsi al contenitore -
flex-start- articoli sono posizionati nella parte superiore del contenitore -
flex-end- articoli sono posizionati nella parte inferiore del contenitore -
center- Gli articoli sono posizionati al centro del contenitore (in senso verticale) -
baseline- Gli articoli sono posizionati alla base del contenitore
L'esempio seguente mostra il risultato utilizzando il stretch valore (questo è il valore di default):
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando il flex-start valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando il flex-end valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando il center valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando la baseline del valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Il flex-wrap Proprietà
Il flex-wrap proprietà specifica se le voci di flex deve andare a capo o no, se non c'è abbastanza spazio per loro in una linea di flessione.
I valori possibili sono i seguenti:
-
nowrap- Il valore di default. Gli elementi flessibili non avvolgere -
wrap- Gli elementi flessibili saranno avvolgere se necessario -
wrap-reverse- Gli elementi flessibili andranno a capo, se necessario, in ordine inverso
L'esempio seguente mostra il risultato dell'utilizzo del nowrap valore (questo è il valore di default):
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando la wrap valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} L'esempio seguente mostra il risultato utilizzando il wrap-reverse valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} La proprietà align-contenuti
Il align-content di proprietà modifica il comportamento della flex-wrap di proprietà. E 'simile a align-items , ma invece di allineare elementi di flessione, si allinea le linee di flessione.
I valori possibili sono i seguenti:
-
stretch- Il valore di default. Le linee si estendono a prendere lo spazio rimanente -
flex-start- Le linee sono imballati verso l'inizio del contenitore flessibile -
flex-end- Le linee sono confezionati verso la fine del contenitore flessibile -
center- Linee sono imballati verso il centro del contenitore flex -
space-between- linee sono uniformemente distribuite nel contenitore flessibile -
space-around- Le linee sono equamente distribuite nel contenitore flessibile, con spazi half-size su entrambi i lati
L'esempio seguente mostra il risultato utilizzando il center valore:
Esempio
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} Flex Proprietà elemento
Ordinamento
L' order proprietà specifica l'ordine di un elemento flessibile rispetto al resto degli elementi flessibili all'interno del medesimo contenitore:
Esempio
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} Margine
Impostazione margin: auto; assorbirà spazio extra. Può essere usato per spingere gli elementi di flessione in posizioni diverse.
Nel seguente esempio abbiamo impostato margin-right: auto; sul primo elemento flessibile. Questo farà sì che tutto lo spazio supplementare per essere assorbito a destra di tale elemento:
Esempio
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} perfetta centratura
Nel seguente esempio risolveremo un problema quasi tutti i giorni: perfetto centraggio.
E 'molto facile con FlexBox. Impostazione margin: auto; farà l'oggetto perfettamente centrato in entrambi gli assi:
Esempio
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} align-auto
Il align-self di proprietà di elementi flessibili prevale proprietà align-oggetti del contenitore flessibile per tale voce. Ha gli stessi valori possibili come il align-items di proprietà.
L'esempio seguente imposta diversi valori align-sé per ogni voce flessione:
Esempio
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} flettere
La flex proprietà specifica la lunghezza dell'elemento flessibile, rispetto al resto degli elementi di flessione all'interno dello stesso contenitore.
Nell'esempio seguente, il primo elemento flessibile consumerà 2/4 dello spazio libero, e gli altri due elementi di flessione consumerà 1/4 dello spazio libero ciascuno:
Esempio
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
Altri esempi
Creare un sito web reattivo con FlexBox
Questo esempio dimostra come creare un layout del sito reattivo con FlexBox.
CSS3 Proprietà Flexbox
Nella tabella seguente sono elencate le proprietà CSS usati con FlexBox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |