Flexbox CSS

1
2
3
4
5
6
7
8

Try it yourself

Modulo di layout CSS Flexbox

Prima dell'introduzione del modulo di layout Flexbox, i modelli di layout disponibili erano i seguenti quattro:

  • Blocco (Block), utilizzato per parti (sezioni) del sito web
  • In linea (Inline), utilizzato per il testo
  • Tabella, utilizzata per dati di tabella bidimensionale
  • Posizionamento, utilizzato per posizionare esplicitamente gli elementi

Il modulo di layout a scatola flessibile, che permette di progettare più facilmente strutture di layout responsive, senza dover utilizzare il flusso o la posizionamento.

Supporto del browser

Tutti i browser moderni lo supportano flexbox Proprietà.

29.0 11.0 22.0 10 48

Elementi Flexbox

Per iniziare a utilizzare il modello Flexbox, è necessario definire prima il contenitore Flex.

1
2
3

Gli elementi superiori rappresentano un contenitore flex con tre elementi flex (area blu).

Example

Contenitore flex con tre elementi flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Try it yourself

L'elemento genitore (contenitore)

Tramite l'uso di: display L'attributo è impostato su: flexIl contenitore flex sarà elastico:

1
2
3

Example

.flex-container {
  display: flex;
}

Try it yourself

Di seguito sono riportati gli attributi del contenitore flex:

Proprietà flex-direction

flex-direction L'attributo definisce in quale direzione il contenitore deve impilare gli elementi flex.

1
2
3

Example

column Il valore imposta l'impilamento verticale degli elementi flex (da alto a basso):

.flex-container {
  display: flex;
  flex-direction: column;
}

Try it yourself

Example

column-reverse Il valore impila gli elementi flex verticalmente (da basso a alto):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Try it yourself

Example

row Il valore impila gli elementi flex orizzontalmente (da sinistra a destra):

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

Try it yourself

Example

row-reverse Il valore impila gli elementi flex orizzontalmente (da destra a sinistra):

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

Try it yourself

Proprietà flex-wrap

flex-wrap L'attributo determina se gli elementi flex devono essere ribaltati:

L'esempio seguente contiene 12 elementi flex per illustrare meglio l'attributo flex-wrap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Example

wrap Il valore determina che gli elementi flex si ribalteranno se necessario:

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

Try it yourself

Example

nowrap Il valore determina che non si ribalteranno gli elementi flex (predefinito):

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

Try it yourself

Example

wrap-reverse Il valore determina che, se necessario, gli elementi flex si ribaltano in ordine inverso:

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

Try it yourself

Proprietà flex-flow

flex-flow L'attributo è una abbreviazione per impostare contemporaneamente gli attributi flex-direction e flex-wrap.

Example

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Try it yourself

Proprietà justify-content

justify-content L'attributo serve per allineare gli elementi flex:

1
2
3

Example

center Il valore allinea gli elementi flex al centro del contenitore:

.flex-container {
  display: flex;
  justify-content: center;
}

Try it yourself

Example

flex-start Il valore allinea gli elementi flex all'inizio del contenitore (predefinito):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Try it yourself

Example

flex-end Il valore allinea gli elementi flex all'estremità finale del contenitore:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Try it yourself

Example

space-around Il valore mostra gli elementi flex con spazi prima, tra e dopo le righe:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Try it yourself

Example

space-between Il valore mostra gli elementi flex con spazi tra le righe:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Try it yourself

Proprietà align-items

align-items L'attributo serve per allineare verticalmente gli elementi flex.

1
2
3

In questi esempi, utilizziamo contenitori di 200 pixel di altezza per illustrare meglio l'attributo align-items.

Example

center Il valore allinea i progetti flex nel centro del contenitore:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Try it yourself

Example

flex-start Il valore allinea i progetti flex all'inizio del contenitore:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Try it yourself

Example

flex-end Il valore allinea i progetti elastiche alla fine del contenitore:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Try it yourself

Example

stretch Il valore allunga i progetti flex per riempire il contenitore (predefinito):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Try it yourself

Example

baseline Il valore allinea i progetti flex secondo la linea di base:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Try it yourself

Attenzione:Questo esempio utilizza diversi font-size per illustrare come i progetti sono allineati secondo la linea di base del testo:

1
2
3
4

Proprietà align-content

align-content La proprietà viene utilizzata per allineare le linee elastiche.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

In questi esempi, utilizziamo un contenitore di 600 pixel di altezza e impostiamo l'attributo flex-wrap su wrap per illustrare meglio l'attributo align-content.

Example

space-between Il valore visualizza le linee elastiche con spazi uguali tra di esse:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Try it yourself

Example

space-around Il valore visualizza le linee elastiche con spazi prima, tra e dopo:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Try it yourself

Example

stretch Il valore allunga le linee elastiche per occupare lo spazio rimanente (predefinito):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Try it yourself

Example

center Il valore viene visualizzato nel centro del contenitore per le linee elastiche:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Try it yourself

Example

flex-start Il valore viene visualizzato all'inizio del contenitore per le linee elastiche:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Try it yourself

Example

flex-end Il valore viene visualizzato alla fine del contenitore per le linee elastiche:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Try it yourself

Centratura perfetta

Nell'esempio seguente, risolveremo un problema di stile molto comune: centratura perfetta.

Soluzione: impostare justify-content e align-items Impostare le proprietà di centro, quindi i progetti flex saranno perfettamente centrati:

Example

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Try it yourself

Elementi figli (progetti)

I elementi diretti figli del contenitore flex diventeranno automaticamente elementi flessibili (flex).

1
2
3
4

Gli elementi superiori rappresentano quattro elementi flessibili blu all'interno di un contenitore flessibile grigio.

Example

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Try it yourself

Gli attributi utilizzati per gli elementi flessibili sono:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Attributo order

order L'attributo definisce l'ordine degli elementi flex.

1
2
3
4

Il primo elemento flex non deve essere visualizzato come il primo elemento nella disposizione.

order Il valore deve essere un numero, il valore predefinito è 0.

Example

order L'attributo può modificare l'ordine degli elementi flex.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Try it yourself

Attributo flex-grow

flex-grow L'attributo definisce quanto un elemento flex crescerà rispetto agli altri elementi flex.

1
2
3

Questo valore deve essere un numero, il valore predefinito è 0.

Example

Fai sì che la velocità di crescita del terzo elemento flessibile sia otto volte maggiore rispetto agli altri elementi flessibili:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Try it yourself

Attributo flex-shrink

flex-shrink L'attributo definisce quanto un elemento flex si ridurrà rispetto agli altri elementi flex.

1
2
3
4
5
6
7
8
9

Questo valore deve essere un numero, il valore predefinito è 0.

Example

Non far sì che il terzo elemento flessibile si riduca quanto gli altri elementi flessibili:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Try it yourself

Attributo flex-basis

flex-basis L'attributo definisce la lunghezza iniziale degli elementi flex.

1
2
3
4

Example

Imposta la lunghezza iniziale del terzo elemento flessibile a 200 pixel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Try it yourself

Attributo flex

flex L'attributo è una abbreviazione degli attributi flex-grow, flex-shrink e flex-basis.

Example

Rende il terzo elemento flessibile non aumentabile (0), non riducibile (0) e di lunghezza iniziale di 200 pixel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Try it yourself

Attributo align-self

align-self L'attributo definisce il modo di allineamento degli elementi selezionati all'interno del contenitore flessibile.

align-self The property will override the default alignment method set by the container's align-items property.

1
2
3
4

In these examples, we use a container that is 200 pixels high to better demonstrate the align-self property:

Example

Align the third flexible item to the center of the container:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Try it yourself

Example

Align the second flexible item to the top of the container, and align the third flexible item to the bottom of the container:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Try it yourself

Responsive Image Gallery Using Flexbox

Create a responsive image gallery using flexbox, which changes between four, two, or full-width images based on screen size:

Try it yourself

Responsive Website Using Flexbox

Create responsive websites using flexbox, including flexible navigation bars and flexible content:

Try it yourself

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

Property Description
display Specifies the box type used for HTML elements.
flex-direction Specifies the direction of flexible items within the flexible container.
justify-content Horizontally align these items when flexible items do not use all available space on the main axis.
align-items Vertically align these items when flexible items do not use all available space on the main axis.
flex-wrap Specifies whether flexible items should wrap onto another line if there is not enough space on a single flex line to contain them.
align-content Modifies the behavior of the flex-wrap property. Similar to align-items, but it aligns the flex line instead of the flexible items.
flex-flow Abbreviated properties of flex-direction and flex-wrap.
order Specifies the order of flexible items relative to other flexible items within the same container.
align-self Used for flexible items. Overrides the container's align-items property.
flex Abbreviated properties of flex-grow, flex-shrink and flex-basis.