path: root/files/it/learn/css/css_layout/flexbox/index.html

---
title: Flexbox
slug: Learn/CSS/CSS_layout/Flexbox
translation_of: Learn/CSS/CSS_layout/Flexbox
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>

<div><a href="/it/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox </a>è un metodo di layout monodimensionale per disporre i componenti in righe oppure in colonne. Quando l'area che li contiene aumenta, i componenti si espandono per colmarne lo spazio, quando invece si restringe anche i componenti si restringono.<br>
Questo articolo comprende i concetti fondamentali.</div>

<div></div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisiti:</th>
   <td>Le basi di HTML (leggi <a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione a HTML</a>) e nozioni sul funzionamento del CSS (leggi <a href="/en-US/docs/Learn/CSS/First_steps">Introduzione a CSS</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Obiettivo:</th>
   <td>Apprendere l'utilizzo di Flexbox per impostare il layout delle pagine web.</td>
  </tr>
 </tbody>
</table>

<h2 id="Perchè_Flexbox">Perchè Flexbox?</h2>

<p>Per molto tempo, le uniche tecniche affidabili per creare layout CSS compatibili con tutti i browser utilizzavano <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">elementi float</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">posizionamento</a>. Funzionavano a sufficienza, ma erano per alcuni aspetti limitati e frustranti.</p>

<p>Per esempio con quelle tecniche era difficile o del tutto impossibile definire in maniera flessibile e vantaggiosa le seguenti impostazioni:</p>

<ul>
 <li>Centrare verticalmente un blocco di contenuti all'interno del proprio contenitore.</li>
 <li>Fare in modo che i figli di un contenitore occupino lo stesso spazio in larghezza o altezza indipendentemente dalle dimensioni del contenitore stesso.</li>
 <li>Fare in modo che in un layout multicolonna, le colonne siano ugualmente alte anche se i loro contenuti differiscono per lunghezza.</li>
</ul>

<p>Nelle sezioni seguenti apprenderemo come flexbox faciliti notevolmente questi compiti. Iniziamo!</p>

<h2 id="Introduzione_a_un_semplice_esempio">Introduzione a un semplice esempio</h2>

<p>Questo articolo presenta una serie di esercizi per aiutare a comprendere il funzionamento di flexbox. Per cominciare copiamo in locale il file di partenza <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> presente in github. Carichiamolo con un browser moderno, ad esempio Firefox o Chrome e facciamo attenzione al codice nell'editor. É possibile in alternativa visionarlo attraverso la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">versione live</a>.</p>

<p><img alt="Image showing the starting point of Flexbox tutorial" src="https://i.imgur.com/Bih741v.png" style="height: 670px; width: 1310px;"></p>

<p>Come vediamo la pagina è formata da un {{htmlelement("header")}} contenente il titolo principale, poi un elemento {{htmlelement("section")}} che contiene tre {{htmlelement("article")}}. Partiamo da questa situazione per creare un layout a tre colonne abbastanza comune.</p>

<h2 id="Individuare_gli_elementi_da_impostare_come_box_flessibili">Individuare gli elementi da impostare come box flessibili</h2>

<p>Per cominciare occorre scegliere il gruppo di elementi che devono apparire come box flessibili; per farlo occorre impostare un valore particolare della proprietà {{cssxref("display")}} del loro elemento padre. In questo caso specifico desideriamo sistemare gli elementi {{htmlelement("article")}}, perciò agiamo sul loro contenitore {{htmlelement("section")}}:</p>

<pre class="brush: css  notranslate">section {
  display: flex;
}</pre>

<p>Questa impostazione trasforma &lt;section&gt; in un <strong>contenitore flex</strong> e gli elementi figli in <strong>componenti flex</strong>. Questo è l'aspetto che otteniamo:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>

<p>Proprio così: con questa semplice regola abbiamo già ottenuto tutto ciò che volevamo! Il layout diventa multicolonna e le colonne che lo formano sono della medesima larghezza e lunghezza. Tutto ciò avviene grazie ai componenti flex, cioè i figli del contenitore impostato come flex, che, grazie a valori predefiniti, risolvono automaticamente problemi tipici come questo.</p>

<p>Ripassiamo cosa è avvenuto: l'elemento il cui valore di  {{cssxref("display")}} è <code>flex</code> si comporta come un elemento blocco all'interno della pagina, ma i suoi figli vengono disposti come componenti flex. Nella prossima sezione capiremo meglio che cosa significa. Notiamo che in alternativa possiamo usare il valore <code>inline-flex</code> per <code>display</code> cosicché gli elementi figlio diventano comunque componenti flex, ma il contenitore si comporta come un elemento in linea.</p>

<h2 id="Il_modello_flex">Il modello flex</h2>

<p>In qualità di componenti flex, gli elementi si dispongono lungo due assi:</p>

<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>

<ul>
 <li>L’<strong>asse principale</strong> (main axis) è l'asse che traccia la direzione lungo la quale i componenti si dispongono, corrispondente in senso orizzontale alle righe oppure in senso verticale alle colonne. Definiamo l'inizio e la fine di questo asse <strong>inizio dell'asse principale</strong> (main start) e <strong>termine dell'asse principale</strong> (main end).</li>
 <li>L’<strong>asse traverso</strong> (cross axis) è l'asse perpendicolare alla direzione dei componenti flex. Definiamo l'inizio e la fine di questo asse <strong>inizio dell'asse traverso</strong> (cross start) e <strong>termine dell'asse traverso</strong> (cross end).</li>
 <li>L'elemento su cui viene impostata la regola <code>display: flex</code>, che nel nostro esempio è {{htmlelement("section")}} è chiamato <strong>contenitore flex</strong> (flex container).</li>
 <li>Gli elementi disposti come box flessibili all'interno del contenitore flex vengono chiamati <strong>componenti flex</strong> (flex items), che nel nostro caso sono gli elementi {{htmlelement("article")}}.</li>
</ul>

<p>Si tengano a mente queste definizioni durante le sezioni successive. In caso di confusione con i termini potete comunque tornare a rileggere questa sezione.</p>

<h2 id="Colonne_o_righe">Colonne o righe?</h2>

<p>Flexbox offre una proprietà chiamata flex-direction {{cssxref("flex-direction")}} che indica quale direzione deve seguire l'asse principale, ovvero come vengono disposti i contenuti flexbox;il valore predefinito è <code>row</code>, in modo che i contenuti si schierino in riga secondo il verso della lingua preimpostata dal browser, che per le quelle occidentali è da sinistra a destra.</p>

<p>Proviamo ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:</p>

<pre class="brush: css  notranslate">flex-direction: column;</pre>

<p>Come vediamo i componenti tornano a schierarsi in colonna, come in un il flusso normale senza aggiungere CSS. Cancelliamo pure questa dichiarazione dall'esercizio, prima di continuare.</p>

<div class="note">
<p><strong>Nota</strong>: Potremmo anche invertire la disposizione dei componenti flex utilizzando i valori <code>row-reverse</code> o <code>column-reverse</code>. Sono da sperimentare!</p>
</div>

<h2 id="Effettuare_il_Wrapping">Effettuare il Wrapping</h2>

<p>Il problema che sorge nel layout quando la larghezza o l'altezza vengono esplicitate è che il gruppo dei contenuti flexbox potrebbe eccedere il limite del contenitore, guastando il layout. Diamo un'occhiata all'esempio <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>,di cui viene fornita la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">visione live</a>. Per eseguire le procedure mostrate da questo punto in poi, salvate una copia del file in locale.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>

<p>Come vediamo i contenuti figli eccedono effettivamente il limite del loro contenitore. Una possibile soluzione consiste nell'aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:</p>

<pre class="brush: css  notranslate">flex-wrap: wrap;</pre>

<p>Proviamo anche ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("article")}}:</p>

<pre class="brush: css  notranslate">flex: 200px;</pre>

<p>Ricaricando possiamo notare il miglioramento che abbiamo ottenuto grazie queste modifiche.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">Adesso possiamo notare che si sono formate un certo numero di righe, ovviamente tante quante ne servono per tutti i contenuti flexbox: quando un contenuto eccede i limiti, scala alla riga successiva. L'impostazione <code>flex: 200px</code> dichiarata per gli articoli significa che ognuno di essi occuperà almeno 200px; questa proprietà verrà discussa con maggior dettaglio più avanti nell'articolo. Notiamo anche che ciascuno degli ultimi contenuti che occupano l'ultima riga è molto più largo in modo da riempirla completamente.</p>

<p>Possiamo sperimentare ancora: innanzitutto assegnare alla proprietà {{cssxref("flex-direction")}} il valore <code>row-reverse</code>, così da ottenere un layout con numerose righe come il precedente in cui però i contenuti si schierano a partire dall'angolo opposto della finestra del browser e fluiscono in maniera inversa.</p>

<h2 id="La_forma_contratta_flex-flow">La forma contratta flex-flow</h2>

<p>Occorre notare a questo punto che esiste una forma contratta, {{cssxref("flex-flow")}}, per le proprietà {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}}. É possibile per esempio sostituire</p>

<pre class="brush: css  notranslate">flex-direction: row;
flex-wrap: wrap;</pre>

<p>con</p>

<pre class="brush: css  notranslate">flex-flow: row wrap;</pre>

<h2 id="Dimensionamento_flessibile_dei_componenti_flex">Dimensionamento flessibile dei componenti flex</h2>

<p>Ora torniamo al primo esempio per capire come determinare la proporzione che occupa ogni componente flex nello spazio rispetto ai componenti suoi pari. Riapriamo il file locale <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, oppure, come punto di partenza, prendiamo il nuovo file <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> di cui viene fornita anche la<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html"> versione live</a>.</p>

<p>Cominciamo aggiungendo la seguente regola al termine del nostro CSS:</p>

<pre class="brush: css  notranslate">article {
  flex: 1;
}</pre>

<p>Si indica in questo modo un valore proporzionale, privo di unità di misura, che determina lo spazio che occupa ogni componente flex rispetto agli altri. In questo caso tutti gli elementi {{htmlelement("article")}} hanno valore 1, il che significa, al netto di spaziature interne (padding) ed esterne (margin), che lo spazio verrà equamente ripartito tra tutti i componenti. Questo è un valore relativo a tutti i componenti flex del medesimo gruppo, perciò, se invece di 1 viene scritto un altro valore, 400000 ad esempio, otteniamo lo stesso risultato.</p>

<p>Di seguito scriviamo questa regola:</p>

<pre class="brush: css  notranslate">article:nth-of-type(3) {
  flex: 2;
}</pre>

<p>Si noti, dopo aver ricaricando la pagina, che il terzo componente {{htmlelement("article")}} riempie il doppio dello spazio occupato da ciascuno degli altri due. Lo spazio totale è ora diviso in quattro, cioè una spaziatura per il primo elemento, una per il secondo e due per il terzo (1+1+2=4), quindi il primo e il secondo occupano un quarto (1/4) di spazio ciascuno mentre il terzo ne occupa due quarti (2/4) ovvero la metà.</p>

<p>Si può anche specificare una misura reale minima al di sotto del quale non è possibile andare. Correggiamo le regole degli articoli in questo modo:</p>

<pre class="brush: css  notranslate">article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}</pre>

<p>Con queste regole affermiamo fondamentalmente quanto segue: "Ogni componente flex occupa almeno 200px nello spazio a disposizione, mentre lo spazio che rimane viene occupato rispettando le unità proporzionali." Ricaricando la pagina possiamo notare la differenza nella ripartizione delle spaziature.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>

<p>La potenza di flexbox risiede nella sua flessibilità ovvero nella responsività con cui gestisce il layout: se ridimensioniamo la finestra del browser oppure inseriamo un nuovo elemento {{htmlelement("article")}} il layout continuerà a funzionare bene.</p>

<h2 id="flex_forma_contratta_al_posto_della_forma_estesa">flex: forma contratta al posto della forma estesa</h2>

<p>La proprietà  {{cssxref("flex")}} rappresenta la forma contratta delle seguenti tre proprietà::</p>

<ul>
 <li>la proporzione, priva di unità di misura reale, di cui abbiamo già discusso, che può essere individualmente espressa utilizzando la forma estesa {{cssxref("flex-grow")}}.</li>
 <li>Una seconda unità proporzionale, {{cssxref("flex-shrink")}} che gioca un ruolo importante nel momento in cui i componenti flex stanno per oltrepassare i limiti del contenitore, specificando la misura in cui questi componenti possono restringersi in modo da non sbordare. Questa però è una proprietà piuttosto avanzata di flexbox che eviteremo di approfondire in questo articolo.</li>
 <li>Una spaziatura reale minima di cui abbiamo già parlato, che può essere individualmente espressa utilizzando la forma estesa flex-basis {{cssxref("flex-basis")}}.</li>
</ul>

<p>È consigliabile non utilizzare le forme estese della proprietà flex, a meno che non si possa fare altrimenti, come per esempio sostituire un valore stabilito in precedenza, perché costringono a scrivere una maggior quantità di codice che può risultare in qualche modo confusionario.</p>

<h2 id="Allineamento_orizzontale_e_verticale">Allineamento orizzontale e verticale</h2>

<p>Con flexbox è possibile allineare i componenti flex lungo l'asse principale (main axis) o lungo l'asse traverso (cross axis). Facciamo alcune prove con la nuova pagina di esempio, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> di cui è presente anche la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">versione live</a> , per mostrare come creare una bottoniera, o barra degli strumenti, semplice e flessibile.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>

<p>Apriamo il codice in locale.</p>

<p>Aggiungiamo al termine del file CSS la regola seguente:</p>

<pre class="brush: css  notranslate">div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p>

<p>Dopo aver ricaricato la pagina, i bottoni vengono ben centrati, sia orizzontalmente che verticalmente. Abbiamo ottenuto questo risultato operando con due nuove proprietà:</p>

<p>Attraverso {{cssxref("align-items")}} controlliamo l'allineamento rispetto all'asse traverso (cross axis).</p>

<ul>
 <li>Il valore predefinito è <code>stretch</code>, che allunga o comprime tutti i componenti flex affinché riempiano lo spazio del loro contenitore lungo l’asse traverso (cross axis). In un contenitore che non ha una misura fissa lungo l’asse traverso, tutti quanti suoi componenti assumono la lunghezza del maggiore fra di loro, perciò nel primo esempio dell'articolo tutti i componenti risultano della stessa altezza senza doverlo specificare.</li>
 <li>In questo esempio viene invece specificato il valore <code>center</code>, per cui ogni componente si dimensiona in funzione del contenuto che possiede, in base a questa dimensione viene quindi centrato lungo l’asse traverso. Questa è la ragione per cui, in questo esempio, i bottoni che sono centrati in verticale.</li>
 <li>Altri valori disponibili sono <code>flex-start</code> e <code>flex-end</code>, che allineano i componenti rispettivamente all’inizio o al temine dell’asse traverso. Per i dettagli vai {{cssxref("align-items")}}.</li>
</ul>

<p>É possibile sostituire l'impostazione data da align-items {{cssxref("align-items")}} , utilizzando la proprietà {{cssxref("align-self")}} di ogni singolo componente figlio. Ad esempio se proviamo ad aggiungere la seguente regola:</p>

<pre class="brush: css  notranslate">button:first-child {
  align-self: flex-end;
}</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p>

<p>Dopo aver verificato l’effetto, possiamo cancellare questa regola per ritornare alla situazione precedente.</p>

<p>Attraverso {{cssxref("justify-content")}} controlliamo il tipo di schieramento dei componenti flex lungo l'asse principale (main axis).</p>

<ul>
 <li>Il valore predefinito è <code>flex-start</code>, per cui il gruppo dei componenti si posiziona all'inizio dell'asse principale.</li>
 <li>Con <code>flex-end</code>, il gruppo si posiziona al termine.</li>
 <li>Con <code>center </code>o altrimenti <code>justify-content</code>, l'allineamento parte dal centro dell'asse principale.</li>
 <li>Con <code>space-around</code>, che è il valore utilizzato nell'esempio, i componenti si distribuiscono equamente lungo l'asse principale; inoltre viene creato un margine all'inizio e al termine dell'asse.</li>
 <li>Con <code>space-between</code> impostiamo una situazione molto simile a <code>space-around</code>, eccettuati i margini alle estremità che non vengono creati.</li>
</ul>

<p>É consigliabile sperimentare le proprietà con valori suddetti prima di continuare a leggere l'articolo.</p>

<h2 id="Ordinare_i_componenti_flex">Ordinare i componenti flex</h2>

<p>Con flexbox è possibile cambiare l'ordine dei componenti senza intervenire manualmente nel sorgente HTML. Questa opportunità non esisteva con le metodologie di layout precedenti.</p>

<p>Proviamo ad aggiungere al CSS una nuova semplice regola:</p>

<pre class="brush: css  notranslate">button:first-child {
  order: 1;
}</pre>

<p>Una volta ricaricato notiamo che il bottone con label "Sorriso" si è spostato al termine dell'asse principale. Vediamo in dettaglio cosa è successo:</p>

<ul>
 <li>Il valore predefinito della proprietà {{cssxref("order")}} di tutti i componenti flex è 0.</li>
 <li>I componenti flex che hanno un valore di ordine maggiore compaiono dopo a quelli con un ordine minore.</li>
 <li>I componenti flex che hanno lo stesso valore compaiono nello stesso ordine del sorgente HTML. Poniamo ad esempio di avere quattro componenti il cui corrispettivo valore è 2, 1, 1 e 0; il loro ordine di apparizione risulterà questo: all'inizio il quarto, poi il secondo, poi il terzo e al termine il primo.</li>
 <li>Il terzo appare dopo il secondo perché hanno lo stesso valore order, dunque viene rispettata la successione con cui vengono definiti nel sorgente.</li>
</ul>

<p>Se impostiamo un valore negativo di order, il componente compare prima di quelli con valore 0. Proviamo ora ad applicare la regola impostando per esempio l'ordine del bottone "Imbarazzo":</p>

<pre class="brush: css  notranslate">button:last-child {
  order: -1;
}</pre>

<h2 id="Flex_box_annidati">Flex box annidati</h2>

<p>Con flexbox possiamo creare layout piuttosto complessi; è del tutto lecito impostare un componente flex in modo che contenga a sua volta componenti annidati flex che vengono visualizzati come flex box. Diamo un'occhiata a <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">see it live also</a>).</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<p>La struttura HTML è abbastanza semplice, l'elemento {{htmlelement("section")}} contiene gli elementi figli {{htmlelement("article")}}. , il terzo di questi contiene tre {{htmlelement("div")}} :</p>

<pre class="notranslate">section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button</pre>

<p>Ora guardiamo il codice che ha creato il layout.</p>

<p>Innanzitutto, impostiamo i figli di {{htmlelement("section")}} affinché diventino flex box.</p>

<pre class="brush: css  notranslate">section {
  display: flex;
}</pre>

<p>Quindi valorizziamo alcune proprietà flex all'interno degli stessi {{htmlelement("article")}}. Si noti in particolare la seconda regola, in cui si impone che il terzo elemento {{htmlelement("article")}} abbia a sua volta componenti innestati flex, i quali però devono essere incolonnati.</p>

<pre class="brush: css  notranslate">article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}
</pre>

<p>Quindi, impostiamo per il primo &lt;div&gt; la proprietà flex a 1 100px; in modo che abbia un'altezza reale di almeno 100px; la proprietà successiva stabilisce che anche gli elementi figli, cioè i (the {{htmlelement("button")}}, divengano componenti flex; tali elementi si dispongono in riga e allineati a partire dal centro dello spazio disponibile mantenendo i margini alle estremità, proprio come l'esempio del bottone visto in precedenza.</p>

<pre class="brush: css  notranslate">article:nth-of-type(3) div:first-child {
  flex:1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}</pre>

<p>Infine viene definita una regola per la dimensione dei bottoni., ma la parte più interessante è la proprietà flex che ha valore 1 auto; questa impostazione genera un comportamento peculiare che notiamo quando restringiamo la finestra del browser: i bottoni cercano di occupare il massimo dello spazio disponibile, si schierano uno accanto all'altro finché c'è spazio disponibile, e poi scalano alla riga seguente.</p>

<pre class="brush: css  notranslate">button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}</pre>

<h2 id="Compatibilità_tra_browser">Compatibilità tra browser</h2>

<p>Gran parte delle ultime versioni dei browser supportano flexbox, cioè Firefox, Chrome, Opera, Microsoft Edge, IE 11, le versioni recenti di Android/iOS ecc. Occorre tuttavia considerare anche la presenza delle versioni antiquate dei browser che non supportano flexbox oppure lo fanno solo parzialmente.</p>

<p>Il problema non incide granché quando ne studiamo e ne proviamo le funzionalità, tuttavia quando si cerca di utilizzare flexbox per creare un sito web reale dobbiamo controllare e assicurarci che l'esperienza utente sia comunque accettabile in quanti più browser possibile.</p>

<p>Applicare flexbox è un po' più complicato di altre funzionalità CSS. Se per esempio il browser non supporta l'ombreggiatura (drop shadow) è facile che l'usabilità del sito rimanga comunque valida, se invece manca il supporto a flexbox è probabile che il layout della pagina si disintegri rendendola inutilizzabile.</p>

<p>Le strategie per ovviare ai problemi di compatibilità tra browser vengono affrontate nel modulo <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a>.</p>

<h2 id="Metti_alla_prova_le_tue_capacità!">Metti alla prova le tue capacità!</h2>

<p>Questo articolo è denso di informazioni, ma riesci a ricordare quelle più importanti?</p>

<p>Prima di continuare possiamo verificare la nostra comprensione alla pagina <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>

<h2 id="Sommario">Sommario</h2>

<p>In conclusione dell'articolo sulle basi di flexbox speriamo di aver suscitato interesse e un buon punto di partenza nel nostro percorso di apprendimento. Nel prossimo articolo ci occupiamo di un altro importante aspetto del layout CSS: le Griglie CSS.</p>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>

<div>
<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
</ul>
</div>