path: root/files/es/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>

<p class="summary"><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> es un método de diseño de página unidimensional para compaginar elementos en filas o columnas. Los elementos de contenido se ensanchan para rellenar el espacio adicional y se encogen para caber en espacios más pequeños. En este artículo expondremos todas sus características básicas.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Los conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Aprender a usar el sistema de compaginación con elementos flexbox para crear compaginaciones web.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Por_qué_flexbox">¿Por qué flexbox?</h2>

<p>Durante mucho tiempo, las únicas herramientas fiables con compatibilidad cruzada entre navegadores disponibles para crear diseños CSS fueron cosas como la <a href="/es/docs/Learn/CSS/CSS_layout/Floats">flotación</a> y el <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">posicionamiento</a>. Están bien y funcionan, pero de alguna manera también limitan bastante y frustran.</p>

<p>Con tales herramientas resulta difícil, si no imposible, lograr obtener en cualquier forma conveniente y flexible un diseño de página sencillo con unos requisitos como los siguientes:</p>

<ul>
 <li>Centrar verticalmente un bloque de contenido dentro de su elemento padre.</li>
 <li>Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.</li>
 <li>Hacer que todas las columnas en una compaginación en columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.</li>
</ul>

<p>Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de compaginación. ¡Vamos a profundizar en ello!</p>

<h2 id="Presentación_de_un_ejemplo_sencillo">Presentación de un ejemplo sencillo</h2>

<p>En este artículo, te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. Para comenzar, debes hacer una copia local del primer archivo de inicio <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de nuestro repositorio de GitHub. Cárgalo en un navegador moderno (como Firefox o Chrome) y echa un vistazo al código en tu editor de código. Puedes <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">verlo en vivo aquí</a>.</p>

<p>Verás que hay un elemento {{htmlelement ("header")}} con un encabezado de nivel superior en él, y un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. Los usaremos para crear una compaginación bastante habitual de tres columnas.</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_qué_elementos_colocar_como_cajas_flexibles">Especificar qué elementos colocar como cajas flexibles</h2>

<p>Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de {{cssxref ("display")}} en el elemento padre de los elementos que deseas editar. En este caso, queremos compaginar los elementos {{htmlelement ("article")}}, por lo que lo establecemos en {{htmlelement ("section")}} (que se convierte en un contenedor flexible):</p>

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

<p>Esto hace que el elemento <code>&lt;section&gt;</code> se convierta en <strong>contenedor flex</strong>, y sus hijos en <strong>elementos flexibles</strong>. El resultado de esto debería ser algo así:</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>Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra compaginación en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este. Veremos más sobre el tema más adelante.</p>

<p>Para que quede claro, reiteremos lo que está sucediendo aquí. El elemento al que le hemos dado un valor de {{cssxref("display")}} de <code>flex</code> actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. La siguiente sección explicará con más detalle qué significa esto. Ten en cuenta también que puede usar un valor de <code>display</code> de <code>inline-flex</code> si desea diseñar los elementos secundarios de un elemento como elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.</p>

<p>
 </p><h2 id="El_modelo_flexible">El modelo flexible</h2>


<p>Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:</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>El <strong>eje principal</strong> (<strong>main axis</strong>) es el eje que corre en la dirección en que se colocan los elementos flexibles (por ejemplo, según se disponen las filas en una página o hacia abajo según se disponen las columnas en una página). El inicio y el final de este eje se denominan <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>final principal</strong> (<strong>main end</strong>).</li>
 <li>El <strong>eje transversal</strong> (<strong>cross axis</strong>) es el eje que corre perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan <strong>inicio transversal</strong> (<strong>cross start</strong>) y <strong>extremo cruzado</strong> (<strong>cross end</strong>).</li>
 <li>El elemento padre que tiene establecido <code>display: flex</code> (el elemento {{htmlelement ("section")}} en nuestro ejemplo) se llama <strong>contenedor flexible</strong>.</li>
 <li>Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan <strong>elementos flexibles</strong> (son los elementos {{htmlelement ("article")}} de nuestro ejemplo).</li>
</ul>

<p>Ten presente esta terminología al avanzar por las secciones posteriores. Si en algún momento te confundes con el uso de estos conceptos, siempre puedes volver atrás a consultarlos.</p>

<h2 id="¿Columnas_o_filas">¿Columnas o filas?</h2>

<p>Los elementos flexbox proporcionan una propiedad llamada {{cssxref ("flex-direction")}} que especifica en qué dirección corre el eje principal (en qué dirección están dispuestos los elementos hijo de un elemento flexbox); por defecto, está establecido en el valor <code>row</code>, por lo que se presenta en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).</p>

<p>Añade la declaración siguiente a tu regla {{htmlelement ("section")}}:</p>

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

<p>Observa que esto vuelve a colocar los elementos en una disposición en columna, al igual que antes de añadir cualquier CSS. Antes de continuar, elimina esta declaración de tu ejemplo.</p>

<div class="note">
<p><strong>Nota</strong>: También puedes compaginar elementos flexibles en una dirección inversa utilizando los valores <code>row-reverse</code> y <code>column-reverse</code>. ¡Experimenta también con estos valores!</p>
</div>

<h2 id="Delimitar">Delimitar</h2>

<p>Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y rompen el diseño. Echa un vistazo a nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> e intenta <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">verlo en vivo</a> (toma una copia local de este archivo si deseas seguir este ejemplo):</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í vemos que los elementos hijo se salen de su contenedor. Una forma de solucionar esto es añadir la declaración siguiente a tu regla {{htmlelement ("section")}}:</p>

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

<p>Añade también la declaración siguiente a tu regla {{htmlelement ("article")}}:</p>

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

<p>Pruébalo; observa que al haberlo incluido el aspecto de la compaginación resulta mucho más agradable:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"> Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración <code>flex: 200px</code> que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho; discutiremos esta propiedad con más detalle más adelante. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.</p>

<p>Pero aquí podemos hacer mucho más. En primer lugar, cambia el valor de tu propiedad {{cssxref ("flex-direction")}} a <code>row-reverse</code>; ahora verás que todavía tienes tu compaginación en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés.</p>

<h2 id="Propiedades_abreviadas_de_flex-flow">Propiedades abreviadas de flex-flow</h2>

<p>En este punto vale la pena señalar que hay una propiedad abreviada para {{cssxref ("flex-direction")}} y {{cssxref ("flex-wrap")}}: {{cssxref ("flex-flow")}}. Así, por ejemplo, puedes reemplazar:</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="Dimensionamiento_flexible_de_elementos_flexibles">Dimensionamiento flexible de elementos flexibles</h2>

<p>Volvamos ahora a nuestro primer ejemplo y veamos cómo podemos controlar qué proporción de espacio ocupan los elementos flexibles. Inicia tu copia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> o toma una copia de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> como nuevo punto de partida (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">consúltalo en vivo</a>).</p>

<p>Primero, añade la regla siguiente al final de tu CSS:</p>

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

<p>Este es un valor de proporción sin unidades que especifica la cantidad de espacio disponible sobre el eje principal que ocupa cada elemento flexible. En este caso, damos a cada elemento {{htmlelement ("article")}} un valor de 1, lo que significa que todos ocuparán una cantidad igual del espacio libre restante después de que se hayan establecido elementos como el área de relleno y el margen. Es una proporción, lo que significa que dar a cada elemento flexible un valor de 400000 tendría exactamente el mismo efecto.</p>

<p>Ahora añade la regla siguiente debajo de la anterior:</p>

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

<p>Al actualizar verás que el tercer {{htmlelement ("article")}} ocupa ahora el doble del ancho disponible que los otros dos; ahora hay cuatro unidades de proporción disponibles en total. Los primeros dos elementos flexibles tienen una cada uno, por lo que ocupan 1/4 del espacio disponible cada uno. El tercero tiene dos unidades, por lo que ocupa 2/4 del espacio disponible (o 1/2).</p>

<p>También puedes especificar un valor de tamaño mínimo dentro del valor flexible. Actualiza las reglas para tu artículo de la manera siguiente:</p>

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

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

<p>Esto establece básicamente que «a cada elemento flexible se le da primero 200px del espacio disponible. Después de eso, el resto del espacio disponible se reparte de acuerdo con las unidades de proporción». Actualiza y observa de qué modo se reparte ahora el espacio.</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 del elemento flexbox se puede ver en su flexibilidad/adaptabilidad: si cambias el tamaño de la ventana del navegador o añades otro elemento {{htmlelement ("article")}}, el diseño continúa funcionando bien.</p>

<h2 id="flex_forma_completa_y_abreviada">flex: forma completa y abreviada</h2>

<p>{{cssxref ("flex")}} es una propiedad abreviada que puede especificar hasta tres valores diferentes:</p>

<ul>
 <li>El valor de proporción sin unidades que ya hemos comentado. Se puede especificar individualmente usando la propiedad {{cssxref ("flex-grow")}}.</li>
 <li>Un segundo valor de proporción sin unidades, {{cssxref ("flex-shrink")}}, que entra en juego cuando los elementos flexibles desbordan el contenedor. Especifica cuánto de la cantidad desbordada se quita al tamaño de cada elemento flexible para evitar que el contenedor se desborde. Esta es una característica bastante avanzada de flexbox, y no la vamos a exponer en detalle en este artículo.</li>
 <li>El valor de tamaño mínimo que ya hemos visto. Se puede especificar individualmente usando el valor {{cssxref ("flex-basis")}}.</li>
</ul>

<p>Recomendamos no usar las propiedades flex sin abreviar a menos que realmente tengas que hacerlo (por ejemplo, para anular algo establecido previamente). Comportan mucho código añadido y suelen aportar confusión.</p>

<h2 id="Alineación_horizontal_y_vertical">Alineación horizontal y vertical</h2>

<p>También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">consúltalo en vivo</a>), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda.</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>Primero, toma una copia local de este ejemplo.</p>

<p>Ahora, añade a la parte inferior del CSS del ejemplo lo siguiente:</p>

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

<p>Actualiza la página y observa que los botones ahora están convenientemente centrados, horizontal y verticalmente. Lo hemos hecho a partir de dos propiedades nuevas.</p>

<p>{{cssxref ("align-items")}} controla dónde se ubican los elementos flexibles en el eje transversal.</p>

<ul>
 <li>Por defecto, el valor es <code>stretch</code>, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.</li>
 <li>El valor <code>center</code> que utilizamos en nuestro código anterior mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal. Es por eso que los botones de nuestro ejemplo ahora están centrados verticalmente.</li>
 <li>También puedes tener valores como <code>flex-start</code> y <code>flex-end</code>, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta {{cssxref ("align-items")}} para conocer todos los detalles al respecto.</li>
</ul>

<p>Puedes anular el comportamiento {{cssxref ("align-items")}} para elementos flexibles individuales aplicándoles la propiedad {{cssxref ("align-self")}}. Por ejemplo, añade a tu CSS lo siguiente:</p>

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

<p>Observa qué efecto tiene esto y retíralo de nuevo al terminar.</p>

<p>{{cssxref ("justify-content")}} controla dónde se ubican los elementos flexibles sobre el eje principal.</p>

<ul>
 <li>El valor por defecto es <code>flex-start</code>, que asienta todos los elementos al comienzo del eje principal.</li>
 <li>Puedes usar <code>flex-end</code> para que se asienten al final.</li>
 <li><code>center</code> también es un valor de <code>justify-content</code> (para alinear contenido), que asienta los elementos flexibles sobre el centro del eje principal.</li>
 <li>El valor <code>space-around</code> que hemos usado antes es útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.</li>
 <li>Hay otro valor, <code>space-between</code>, que es muy similar a <code>space-around</code>, pero no deja espacio en los extremos.</li>
</ul>

<p>Te animamos a jugar con estos valores para ver cómo funcionan antes de continuar.</p>

<h2 id="Ordenar_los_elementos_flexibles">Ordenar los elementos flexibles</h2>

<p>Los elementos flexbox también tienen una función para cambiar el orden de disposición de los elementos flexibles, sin que ello afecte a su orden en el código fuente. Esto es algo que resulta imposible de hacer con los métodos de compaginación tradicionales.</p>

<p>El código para esto es simple: añade el siguiente CSS al código de ejemplo de la barra de controles:</p>

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

<p>Actualiza, y observa que el botón «Smile» se ha movido al final del eje principal. Observemos cómo funciona esto con un poco más de detalle:</p>

<ul>
 <li>Por defecto, todos los elementos flexibles tienen un valor {{cssxref ("order")}} de 0.</li>
 <li>Los elementos flexibles que tengan establecidos los valores de orden más altos aparecerán más tarde en el orden de visualización que los elementos que tengan valores de orden más bajos.</li>
 <li>Los artículos flexibles con el mismo valor de orden aparecerán en su orden de origen. Luego, si hay cuatro elementos cuyos valores de orden se han establecido en 2, 1, 1 y 0, respectivamente, su orden de visualización será 4°, 2°, 3° y, por último, 1°.</li>
 <li>El tercer elemento aparece después del segundo porque tiene el mismo valor de orden y está después de él en el orden del código de origen.</li>
</ul>

<p>Puedes establecer valores de orden negativos para que los elementos aparezcan antes que los elementos establecidos con el valor 0. Por ejemplo, puedes hacer que el botón «Blush» aparezca al comienzo del eje principal utilizando la regla siguiente:</p>

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

<h2 id="Cajas_flexibles_anidadas">Cajas flexibles anidadas</h2>

<p>Los elementos flexbox permiten crear algunos diseños de página bastante complejos. Es perfectamente aceptable configurar un elemento flexible para que también sea un contenedor flexible, de modo que los elementos secundarios también se dispongan como cajas flexibles. Echa un vistazo a complex-flexbox.html (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">consúltalo en vivo</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>El HTML para ello es bastante simple. Hay un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. El tercer elemento {{htmlelement ("article")}} contiene tres elementos {{htmlelement ("div")}}:</p>

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

<p>Veamos el código que hemos usado para esta compaginación.</p>

<p>En primer lugar, configuramos los elementos secundarios de {{htmlelement ("section")}} para que se presenten como cajas flexibles.</p>

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

<p>A continuación, establecemos algunos valores flexibles en los elementos {{htmlelement ("article")}}. Presta una atención especial a la segunda regla: configuramos el tercer elemento {{htmlelement ("article")}} para que sus hijos también se presenten como elementos flexibles, pero esta vez los disponemos en una 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ón, seleccionamos el primer elemento {{htmlelement ("div")}}. Primero usamos <code>flex:1 100px;</code> para darle una altura mínima efectiva de 100 px, luego configuramos sus elementos secundarios (los elementos {{htmlelement ("button")}}) para que también se presenten como elementos flexibles. Aquí los colocamos en una fila que los delimita y los alineamos en el centro del espacio disponible, como hicimos en el ejemplo del botón individual que vimos antes.</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>Por último, establecemos un tamaño para el botón, pero lo más interesante es que le damos un valor flexible de 1 auto. Esto tiene un efecto muy interesante, que puedes observar si cambias el tamaño del ancho de la ventana de tu navegador. Los botones ocuparán tanto espacio como puedan y se asentarán tantos en la misma línea como quepan, pero cuando ya no quepan con comodidad en la misma línea, saltarán de línea y crearán líneas nuevas.</p>

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

<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>

<p>La compatibilidad de los elementos flexbox está garantizada para la mayoría de los navegadores nuevos: Firefox, Chrome, Opera, Microsoft Edge e Internet Explorer 11, las versiones más recientes de Android/iOS, etc. Sin embargo, todavía hay navegadores antiguos en uso que no admiten las propiedades flexbox (o lo hacen, pero admiten una versión muy antigua y desactualizada).</p>

<p>Esto no importa demasiado mientras estás aprendiendo y experimentando; pero cuando consideras usar propiedades flexbox en un sitio web real, debes hacer pruebas y asegurarte de que tu experiencia de usuario sea lo suficientemente aceptable en tantos navegadores como sea posible.</p>

<p>Las propiedades flexbox son un poco más complicadas que otras características de CSS. Por ejemplo, si un navegador no soporta sombras en CSS, es probable que el sitio todavía sea utilizable. Sin embargo, si no es compatible con las funciones flexbox, probablemente el diseño completo se romperá, y el sitio web se inutilizará.</p>

<p>Expusimos estrategias para superar problemas de compatibilidad entre navegadores en nuestro módulo <a href="/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing">Pruebas de compatibilidad del navegador</a>.</p>

<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>

<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar si retienes esta información antes de seguir en <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>

<h2 id="Resumen">Resumen</h2>

<p>Con esto concluye nuestro recorrido por los conceptos básicos de las propiedades flexbox. Esperamos que te hayas divertido y que juegues con ello mientras avanzas en tu aprendizaje. A continuación, veremos otro aspecto importante de los diseños CSS: las rejillas CSS.</p>

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

<div>
<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</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">Cuadrícula</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotadores</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en varias columnas</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad en navegadores antiguos</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li>
</ul>
</div>