Contenitore flessibile CSS
Elemento padre (contenitore)
Come abbiamo specificato nel capitolo precedente, questo è un contenitore flessibile (l'area blu) con tre elementi flessibili :
1
2
3
Il contenitore flessibile diventa flessibile impostando la displayproprietà su
flex:
Esempio
.flex-container {
display: flex;
}
Le proprietà del contenitore flessibile sono:
La proprietà della direzione flessibile
La flex-directionproprietà definisce in quale direzione il contenitore desidera impilare gli elementi flessibili.
1
2
3
Esempio
Il columnvalore impila gli elementi flessibili verticalmente (dall'alto verso il basso):
.flex-container {
display: flex;
flex-direction: column;
}
Esempio
Il column-reversevalore impila gli elementi flessibili verticalmente (ma dal basso verso l'alto):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Esempio
Il rowvalore impila gli elementi flessibili orizzontalmente (da sinistra a destra):
.flex-container {
display: flex;
flex-direction: row;
}
Esempio
Il row-reversevalore impila gli elementi flessibili orizzontalmente (ma da destra a sinistra):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
La proprietà dell'involucro flessibile
La flex-wrapproprietà specifica se gli elementi flessibili devono essere a capo o meno.
Gli esempi seguenti hanno 12 elementi flessibili, per dimostrare meglio la
flex-wrapproprietà.
1
2
3
4
5
6
7
8
9
10
11
12
Esempio
Il wrapvalore specifica che gli elementi flessibili verranno a capo, se necessario:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Esempio
Il nowrapvalore specifica che gli elementi flessibili non verranno a capo (questo è l'impostazione predefinita):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Esempio
Il wrap-reversevalore specifica che gli elementi flessibili verranno inseriti, se necessario, in ordine inverso:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
La proprietà del flusso flessibile
La flex-flowproprietà è una proprietà abbreviata per impostare sia le
flex-directionproprietà che
flex-wrap.
Esempio
.flex-container {
display: flex;
flex-flow: row wrap;
}
La proprietà justify-content
La justify-contentproprietà viene utilizzata per allineare gli elementi flessibili:
1
2
3
Esempio
Il centervalore allinea gli elementi flessibili al centro del contenitore:
.flex-container {
display: flex;
justify-content: center;
}
Esempio
Il flex-startvalore allinea gli elementi flessibili all'inizio del contenitore (questo è l'impostazione predefinita):
.flex-container {
display: flex;
justify-content: flex-start;
}
Esempio
Il flex-endvalore allinea gli elementi flessibili alla fine del contenitore:
.flex-container {
display: flex;
justify-content: flex-end;
}
Esempio
Il space-aroundvalore visualizza gli elementi flessibili con spazio prima, tra e dopo le righe:
.flex-container {
display: flex;
justify-content: space-around;
}
Esempio
Il space-betweenvalore mostra gli elementi flessibili con spazio tra le righe:
.flex-container {
display: flex;
justify-content: space-between;
}
La proprietà align-items
La align-itemsproprietà viene utilizzata per allineare gli elementi flessibili.
1
2
3
In questi esempi utilizziamo un contenitore alto 200 pixel, per dimostrare meglio la
align-itemsproprietà.
Esempio
Il centervalore allinea gli elementi flessibili al centro del contenitore:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Esempio
Il flex-startvalore allinea gli elementi flessibili nella parte superiore del contenitore:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Esempio
Il flex-endvalore allinea gli elementi flessibili nella parte inferiore del contenitore:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Esempio
Il stretchvalore estende gli elementi flessibili per riempire il contenitore (questo è l'impostazione predefinita):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Esempio
Il baselinevalore allinea gli elementi flessibili come le loro linee di base allineate:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Nota: l'esempio utilizza una dimensione del carattere diversa per dimostrare che gli elementi vengono allineati dalla linea di base del testo:
1
2
3
La proprietà align-content
La align-contentproprietà viene utilizzata per allineare le linee flessibili.
1
2
3
4
5
6
7
8
9
10
11
12
In questi esempi utilizziamo un contenitore alto 600 pixel, con la
flex-wrapproprietà impostata su wrap, per dimostrare meglio la align-contentproprietà.
Esempio
Il space-betweenvalore mostra le linee flessibili con uguale spazio tra loro:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Esempio
Il space-aroundvalore visualizza le linee flessibili con spazio prima, tra e dopo di esse:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Esempio
Il stretchvalore allunga le linee flessibili per occupare lo spazio rimanente (questo è l'impostazione predefinita):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Esempio
I centerdisplay dei valori mostrano le linee flessibili al centro del contenitore:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Esempio
Il flex-startvalore visualizza le linee flessibili all'inizio del contenitore:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Esempio
Il flex-endvalore mostra le linee flessibili alla fine del contenitore:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Centratura perfetta
Nell'esempio seguente risolveremo un problema di stile molto comune: il centraggio perfetto.
SOLUZIONE: imposta entrambe le proprietà
justify-contente su , e l'elemento flessibile sarà perfettamente centrato:align-itemscenter
Esempio
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Le proprietà del contenitore CSS Flexbox
La tabella seguente elenca tutte le proprietà CSS Flexbox Container:
| Property | Description |
|---|---|
| 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 |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |