path: root/files/ca/learn/css/disseny_css/flexbox/index.html

---
title: Flexbox
slug: Learn/CSS/Disseny_CSS/Flexbox
tags:
  - Article
  - Beginner
  - CSS
  - CSS layouts
  - CodingScripting
  - Flexible Boxes
  - Guide
  - Layout
  - Layouts
  - Learn
  - flexbox
translation_of: Learn/CSS/CSS_layout/Flexbox
---
<div>{{LearnSidebar}}</div>

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

<p class="summary"><a href="/ca/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> és un mètode de disseny de pàgina web unidimensional que distribueix els elements de la pàgina web en files o en columnes. Els elements són «flexibles» i omplen tot l’espai de més o s’encongeixen per caber en espais més petits. Aquest article n’explica els fonaments.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisits:</th>
   <td><span id="result_box" lang="ca">Conceptes bàsics d'HTML</span> (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), <span id="result_box" lang="ca">i nocions de com funciona el CSS</span> (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Aprendre a utilitzar el sistema de disseny de pàgines web Flexbox.</td>
  </tr>
 </tbody>
</table>

<h2 id="Per_què_Flexbox">Per què Flexbox?</h2>

<p>Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys de pàgina web amb CSS eren mètodes com ara els <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">elements flotants (<em>floats</em>)</a> i el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>. Estan bé i funcionen, però d'alguna manera també són més limitats i frustrants.</p>

<p>Uns requisits senzills de disseny de pàgina web com els que enumerem a continuació són difícils o impossibles d'aconseguir amb aquestes eines d’una manera còmoda i flexible:</p>

<ul>
 <li>Que un bloc de contingut es centri verticalment dins de l’element pare.</li>
 <li>Que tots els elements fills d'un contenidor ocupin la mateixa quantitat d'amplada/alçada, independentment de la quantitat d'amplada/alçada que hi hagi disponible.</li>
 <li>Que totes les columnes d'un disseny de pàgina en columnes múltiples adoptin la mateixa alçada, encara que continguin una quantitat de contingut diferent.</li>
</ul>

<p>Com veureu en les properes seccions, Flexbox facilita moltes tasques de disseny de pàgina web. Aprofundim-hi!</p>

<h2 id="Un_exemple_senzill">Un exemple senzill</h2>

<p>En aquest article, et farem treballar en un seguit d'exercicis que t’ajudaran a entendre com funciona Flexbox. Per començar, fes una còpia local del primer fitxer d'inici, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, que trobaràs en el nostre repositori de GitHub; carrega’l en un navegador modern (com Firefox o Chrome) i consulta’n el codi en el teu editor. També ho pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">veure en viu aquí</a>.</p>

<p>Observa que hi ha un element {{htmlelement("header")}} amb un títol d’encapçalament de nivell superior i un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. Els farem servir per a crear un disseny de tres columnes força habitual.</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>

<h2 id="Especificar_els_elements_flexbox">Especificar els elements flexbox</h2>

<p>Per començar hem de decidir quins elements volem configurar perquè es comportin com caixes flexibles. Per tal de fer-ho, establim un valor especial de {{cssxref("display")}} en l'element pare dels elements als quals afectarà. En aquest cas, volem que siguin els elements {{htmlelement("article")}}, per la qual cosa ho configurem en l’element {{htmlelement("section")}}:</p>

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

<p>Això fa que l'element <code>&lt;section&gt;</code> esdevingui un <strong>contenidor flexible</strong> i els seus fills <strong>ítems flexibles</strong>. El resultat d'això hauria de presentar un aspecte semblant a això:</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>Per tant, aquesta declaració única, ens dona tot el que necessitem; increïble, oi? Tenim el nostre disseny de pàgina de columna múltiple amb columnes de la mateixa mida, i que tenen la mateixa alçada. Això és perquè els valors predeterminats que s’han donat als elements flex (els fills del contenidor flex) estan dissenyats per a resoldre problemes comuns com aquest.</p>

<p>Per deixar-ho clar, reiterem el que passa aquí. L’element al qual hem donat un valor de {{cssxref("display")}} de <code>flex</code> actua com un element de nivell de bloc en termes de com interactua amb la resta de la pàgina, però els seus fills es presenten com a elements flexibles. La següent secció explicarà amb més detall què significa això. Fixeu-vos també que podeu utilitzar un valor de <code>display</code> d'<code>inline-flex</code> si voleu disposar els fills d'un element com a elements flexibles, però que aquest element es comporti com un element en línia.</p>

<h2 id="El_model_flex">El model flex</h2>

<p>Els elements que es disposen com caixes flexibles, es distribueixen al llarg de dos eixos:</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>eix principal</strong> (<strong><em>main axis</em></strong>) és l'eix que corre en la direcció en què es disposen els elements flex (p. ex., com files al llarg de la pàgina o com columnes, cap avall de la pàgina). L'inici i el final d'aquest eix reben els noms d’<strong>inici principal</strong> (<strong><em>main start</em></strong>) i <strong>final principal</strong> (<em><strong>main end</strong></em>).</li>
 <li>L'<strong>eix transversal</strong> (<strong><em>cross axis</em></strong>) és l'eix que corre perpendicular a la direcció en què es disposen els elements flexibles. L'inici i el final d'aquest eix s'anomenen <strong>inici transversal</strong> (<strong><em>cross-start</em></strong>) i <strong>final tranversal</strong> (<strong><em>cross-end</em></strong>).</li>
 <li>L'element pare que està configurat amb <code>display: flex</code> (la secció {{htmlelement("section")}} del nostre exemple) s'anomena <strong>contenidor flex</strong> (<strong><em>flex container</em></strong>).</li>
 <li>
  <p>Els elements que es disposen com caixes flexibles dins del contenidor flex s'anomenen <strong>elements flexibles</strong> (flex items) (els elements {{htmlelement("article")}} del nostre exemple).</p>
 </li>
</ul>

<p>Tingues present aquesta terminologia a mesura que avances en les seccions. Sempre pots tornar enrere si en algun moment l’ús d’aquests termes et genera confusions.</p>

<h2 id="Columnes_o_files"><span id="result_box" lang="ca">Columnes o files?</span></h2>

<p>Flexbox proporciona una propietat anomenada {{cssxref("flex-direction")}}, que especifica en quina direcció discorre l'eix principal (en quina direcció es disposen les caixes flexibles fill); per defecte, està definida en <code>row</code>, que fa que els elements flexibles es disposin en una fila en la direcció de l'idioma predeterminat amb què funciona el teu navegador (d'esquerra a dreta, en el cas d'un navegador en català).</p>

<p>Prova d'afegir a la teva regla <code>&lt;section&gt;</code> la declaració següent:</p>

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

<p>Observa que això posa de nou els elements en una disposició en columna, igual que estaven abans d’afegir-hi el CSS. Abans de continuar, elimina aquesta declaració del teu exemple.</p>

<div class="note">
<p><strong>Nota</strong>: També pots disposar elements flexibles en direcció inversa amb els valors <code>row-reverse</code> i <code>column-reverse</code>. Experimenta també amb aquests valors.</p>
</div>

<h2 id="Ajust">Ajust</h2>

<p>Un problema que sorgeix quan tens un disseny de pàgina amb una amplada o una alçada fixa és que els fills de l’element flexbox poden desbordar el contenidor i trencar el disseny de la pàgina. Fes un cop d'ull al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> i <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">mira’l en directe</a> (fes primer una còpia local d'aquest fitxer, si vols seguir amb aquest exemple):</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>Aquí observem que els fills desborden el contenidor. Una manera de solucionar això és afegir a la teva regla <code><a href="/ca/docs/Web/HTML/Element/section">&lt;section&gt;</a></code> la declaració següent:</p>

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

<p>Afegeix també la declaració següent a la teva regla <code><a href="/ca/docs/Web/HTML/Element/article">&lt;article&gt;</a></code></p>

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

<p>Ara prova-ho; observa que el disseny es veu força més bé ara que hi has inclòs això:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">Ara hi ha diverses files, i a cada fila hi ha tantes elements fill flexbox com és raonable que hi hagi, i si hi ha cap desbordament, es genera una altra línia. La declaració <code>flex: 200px</code> que hem establer per als elements <code>&lt;article&gt;</code> significa que cada article tindrà com a mínim una amplada de 200px; més endavant parlarem d'aquesta propietat amb més detall. També pots observar que els últims fills de l'última fila s’han fet més amples, de manera que la fila està igualment tota plena.</p>

<p>Però encara hi podem fer més. Primer de tot, prova de canviar el valor de la propietat {{cssxref("flex-direction")}} a <code>row-reverse</code>; observa que encara tens el disseny de files múltiples, però ara comença des de la cantonada oposada de la finestra del navegador i flueix en sentit invers.</p>

<h2 id="La_propietat_flex-flow_abreujada">La propietat <code>flex-flow</code> abreujada</h2>

<p>En aquest punt, val la pena observar que hi ha una propietat abreujada per a {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}}, que és: {{cssxref("flex-flow")}}. Per exemple, pots substituir:</p>

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

<p>per</p>

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

<h2 id="Dimensió_flexible_dels_elements_flexibles">Dimensió flexible dels elements flexibles</h2>

<p>Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai poden ocupar els elements flexibles. Fes servir la teva còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, o fes una còpia de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> com a punt de partida nou (també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">veure en viu</a>).</p>

<p>Primer, afegeix la regla següent al final del teu CSS:</p>

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

<p>Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocupa cada element flexible. En aquest cas donem a cada element {{htmlelement("article")}} un valor de 1, que significa que tots ocuparan una quantitat igual de l'espai que sobri després que s'hagin establert elements com ara l’àrea de farciment i el marge. És una proporció, que significa que donar a cada element flexible un valor de 400.000 tindria exactament el mateix efecte.</p>

<p>A continuació, afegeix la regla següent a sota de l'anterior:</p>

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

<p>Aleshores, actualitza. Observa que el tercer element {{htmlelement("article")}} ocupa el doble de l'amplada disponible que els altres dos; perquè ara hi ha en total quatre unitats proporcionals disponibles. Els dos primers elements flexibles en tenen una cadascun, i prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o el que és el mateix, la meitat).</p>

<p>També pots especificar un valor de mida mínima per al valor flex. Actualitza les teves regles per als elements <code>&lt;article&gt;</code>, així:</p>

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

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

<p>Això bàsicament estableix que «Es dona a cada element flexible primer 200px de l'espai disponible. A continuació, la resta de l'espai disponible es reparteix segons les unitats de proporció». Actualitza i observa com es reparteix l'espai ara.</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>El valor real de flexbox es pot apreciar en la flexibilitat / capacitat de resposta; si canvies la mida de la finestra del navegador o afegeixes un altre element {{htmlelement("article")}}, el disseny de pàgina encara funciona.</p>

<h2 id="Propietat_flex_abreujada_o_no_abreujada">Propietat <code>flex</code> abreujada o no abreujada</h2>

<p>{{Cssxref("flex")}} és una propietat de abreujada que pot especificar fins a tres valors diferents:</p>

<ul>
 <li>El valor de la proporció sense unitat que hem comentat abans. Es pot especificar per a cada element usant la propietat no abreujada {{cssxref("flex-grow")}}.</li>
 <li>Un segon valor de proporció sense unitat, {{cssxref("flex-shrink")}}, que entra en joc quan els elements flexibles desborden de l’element contenidor. Especifica quanta de la quantitat que desborda es treu de la mida de cada element flexible per a evitar que desbordi del contenidor. Aquesta és una característica avançada de flexbox i no la detallarem més en aquest article.</li>
 <li>El valor mínim de la mida, que hem comentat abans. Es pot especificar per a cada element usant el valor no abreujat {{cssxref("flex-base")}}.</li>
</ul>

<p>Recomanem evitar l'ús de les propietats flex no abreujades, si no és que t’és realment necessari (per exemple, perquè has de substituir alguna configuració anterior). Comporta escriure una gran quantitat de codi addicional, i pot acabar sent una mica confús.</p>

<h2 id="Alineació_horitzontal_i_vertical">Alineació horitzontal i vertical</h2>

<p>També pots utilitzar funcions flexbox per a alinear elements flexibles al llarg dels eixos principals o transversals. Ho expliquem amb un nou exemple, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">veure en viu</a>), que convertirem en una bonica barra d'eines/botons flexible. De moment, observa aquesta barra de menú horitzontal amb alguns botons agrupats a la cantonada superior esquerra.</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><span id="result_box" lang="ca">Primer, fes una còpia local d'aquest exemple</span>.</p>

<p>A continuació, afegeix a la part inferior del CSS de l'exemple el codi següent:</p>

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

<p>Actualitza la pàgina i observa que els botons estan ben centrats, horitzontalment i verticalment. Ho hem fet amb dues propietats noves.</p>

<p>El control {{cssxref("align-items")}} disposa els elements flexibles sobre l'eix transversal.</p>

<ul>
 <li>El valor predeterminat és <code>stretch</code>, que estira tots els elements flexibles fins a ocupar tot l’espai de l’element pare en la direcció de l'eix transversal. Si l’element pare no té una amplada fixa en la direcció de l'eix transversal, tots els elements flexibles es faran tan llargs com l’element flexible més llarg. Per això el nostre primer exemple tenia per defecte columnes de la mateixa alçada.</li>
 <li>El valor <code>center</code> que hem utilitzat en el codi anterior manté les dimensions intrínseques dels elements, però els centrats al llarg de l'eix transversal. És per això que els botons d’aquest exemple estan centrats verticalment.</li>
 <li>També pots tenir valors com <code>flex-start</code> i <code>flex-end</code>, que alineen tots els elements al principi i al final de l'eix transversal, respectivament. Consulta’n tots els detalls en {{cssxref("align-items")}}.</li>
</ul>

<p>Pots anul·lar el comportament {{cssxref("align-items")}} per a elements flexibles individuals amb la propietat {{cssxref("align-self")}}. Per exemple, afegeix al teu CSS el codi el següent:</p>

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

<p>Dona un cop d'ull a l'efecte que hi produeix i retira de nou aquest codi quan hagis acabat.</p>

<p>La propietat {{cssxref("justify-content")}} controla on s’ubiquen els elements flexibles sobre l'eix principal.</p>

<ul>
 <li>El valor per defecte és <code>flex-start</code>, que col·loca tots els elements al principi de l'eix principal.</li>
 <li>Pots fer servir <code>flex-end</code> perquè es col·loquin al final.</li>
 <li>El valor <code>center</code> també és un valor per a <code>justify-content</code> i posa els elements flexibles al centre de l'eix principal.</li>
 <li>El valor que hem utilitzat abans, <code>space-around</code>, és útil perquè distribueix tots els elements sobre l'eix principal de manera uniforme i deixa una mica d'espai en cada extrem.</li>
 <li>Hi ha un altre valor, <code>space-between</code>, que és molt similar a <code>space-around</code>, però que no deixa cap espai als extrems.</li>
</ul>

<p>T’animem a jugar amb aquests valors i veure com funcionen abans de continuar.</p>

<h2 id="Ordena_els_elements_flexibles">Ordena els elements flexibles</h2>

<p>Flexbox també té una característica que canvia l'ordre de disposició dels elements flexibles sense afectar l'ordre d'origen. Aquesta és una altra característica que és impossible de fer amb els mètodes tradicionals de disseny de pàgines web.</p>

<p>El codi per a això és senzill: afegeix al codi d'exemple de la barra de botons el codi CSS següent:</p>

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

<p>Actualitza, i observa que ara el botó «Smile» s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:</p>

<ul>
 <li>Per defecte, tots els elements flexibles tenen un valor d’ordre ({{cssxref("order")}}) de 0.</li>
 <li>Els elements flexibles que estan configurats amb un valor d’ordre més alt apareixen més endavant en l'ordre de visualització que els elements amb valors d’ordre més baix.</li>
 <li>Els elements flexibles que tenen el mateix valor d'ordre apareixen en l’ordre d'origen. Així, si hi ha quatre elements que tenen configurats els valors d'ordre 2, 1, 1 i 0, respectivament, l’ordre de visualització serà 4t, 2n, 3r i 1r.</li>
 <li>El 3r element apareix després del 2n perquè té el mateix valor d'ordre i està després en l'ordre d'origen.</li>
</ul>

<p>Pots establir valors d'ordre negatius i fer que els elements apareguin abans que els elements amb un ordre 0. Per exemple, pots fer que el botó «Blush» aparegui al principi de l'eix principal amb la següent regla:</p>

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

<h2 id="Caixes_flexibles_imbricades">Caixes flexibles imbricades</h2>

<p>Amb flexbox és possible crear dissenys força complexos. És del tot correcte establir que un element flexible sigui també un contenidor flexible, de manera que els elements fills també es disposin com caixes flexibles. Dona un cop d'ull a <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (o també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">veure en viu</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>L'HTML d’això és força senzill. Hi ha un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. El tercer element {{htmlelement("article")}} conté tres elements {{htmlelement("div")}}:</p>

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

<p>Observa el codi que hem utilitzat per al disseny.</p>

<p>En primer lloc, establim que els fills de {{htmlelement("section")}} es disposin com caixes flexibles.</p>

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

<p>A continuació, establim alguns valors flex en els propis elements {{htmlelement("article")}}. Aquí cal tenir en compte la 2a regla; configurem el tercer element {{htmlelement("article")}} de manera que els seus elements fills es disposin també com elements flexibles, però aquesta vegada en columna.</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>A continuació, seleccionem el primer element {{htmlelement("div")}}. Utilitzem la declaració <code>flex: 1 100px;</code> perquè hi doni efectivament una alçada mínima de 100px, aleshores en configurem els elements fills (els elements {{htmlelement("button")}}) perquè també siguin elements flexibles. Els distribuïm en fila perquè ocupin tot l’espai amb la propietat <code>wrap</code> i els alineem al centre de l'espai disponible, com hem fet en l'exemple del botó individual que hem vist abans.</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>Finalment, establim les dimensions del botó, però la qüestió interessant és que hi donem un valor de flex de 1. Això té un efecte molt interessant, que pots observar si canvies la mida de l'amplada de la finestra del navegador. Els botons ocuparan tant d’espai com puguin i es disposaran sobre la mateixa línia tant com sigui possible, però quan ja no càpiguen amb comoditat a la mateixa línia, cauran a la línia següent.</p>

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

<h2 id="Compatibilitat_amb_altres_navegadors">Compatibilitat amb altres navegadors</h2>

<p>Flexbox és compatible amb la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, i les versions més noves d'Android/iOS, etc. No obstant això, cal tenir en compte que encara hi ha navegadors antics en ús que no admeten Flexbox (o bé n’admeten una versió antiga i desactualitzada).</p>

<p>Mentre ets en procés d’aprendre i experimentar, això no importa gaire; però si consideres l'ús de flexbox en un lloc web real, has de fer proves i assegurar-te que la teva experiència d'usuari continua sent acceptable en el màxim nombre de navegadors possible.</p>

<p>Flexbox és una mica més complicat que altres característiques CSS. Per exemple, si un navegador no té ombres CSS, probablement el lloc web serà encara usable. En canvi, la no-compatibilitat amb les característiques de flexbox probablement trencarà del tot el disseny i inutilitzarà el lloc web.</p>

<p>En un altre mòdul parlarem de les estratègies per a superar els complexos problemes de compatibilitat dels navegadors.</p>

<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2>

<p>Hem vist moltes coses en aquest article. En recordes la informació més important? Trobaràs més tests per poder comprovar si has retingut la informació abans de seguir a <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>

<h2 id="Resum">Resum</h2>

<p>Això clou el nostre recorregut pels fonaments de flexbox. Esperem que t’hagis divertit i que sàpigues jugar-hi mentre continues endavant amb el teu aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS, els sistemes de graella.</p>

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