---
title: flex
slug: Web/CSS/flex
translation_of: Web/CSS/flex
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p> </p>
<p>La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.</p>
<p>{{cssinfo}}</p>
<p> </p>
<p>Consulte <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/">Cómo usar las cajas flexibles de CSS</a> para conocer más propiedades e información.</p>
<h2 id="Syntax" name="Syntax">Sintáxis</h2>
<pre class="brush:css">/* 0 0 auto */
flex: none;
/* Un valor, número sin unidades: flex-grow */
flex: 2;
/* Un valor, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Dos valores: flex-grow | flex-basis */
flex: 1 30px;
/* Dos valores: flex-grow | flex-shrink */
flex: 2 2;
/* Tres valores: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Valores globales */
flex: inherit;
flex: initial;
flex: unset;
</pre>
<h3 id="Values" name="Values">Valores</h3>
<dl>
<dt><code><'flex-grow'></code></dt>
<dd>
<p>Define el <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">flex-grow</a> del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.</p>
</dd>
<dt><code><'flex-shrink'></code></dt>
<dd>Define el <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.</dd>
<dt><code><'flex-basis'></code></dt>
<dd>Define el <a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis"><code>flex-basis</code></a> del elemento flexible. Se acepta cualquier valor válido para las propiedades <code>width</code> y <code>height</code> . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.</dd>
<dt><code>none</code></dt>
<dd>Esta palabra clave se computa a <code>0 0 auto</code>.</dd>
<dt>
<h3 id="Sintaxis_normal">Sintaxis normal</h3>
</dt>
</dl>
{{csssyntax}}
<h2 id="Ejemplo">Ejemplo</h2>
<pre class="brush: css">#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
</pre>
<pre class="brush: html"><div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
</pre>
<div class="hidden">
<pre class="brush: js">var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
raw.style.display = raw.style.display == "none" ? "block" : "none";
});
</pre>
<pre class="brush: css">#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
</pre>
</div>
<h3 id="Resultado">Resultado</h3>
<p>{{EmbedLiveSample('Example','100%','60')}}</p>
<h2 id="Specifications" name="Specifications">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
{{CompatGeckoDesktop("20.0")}}<br>
{{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td>
<td>21.0{{property_prefix("-webkit")}}<br>
29.0</td>
<td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
11.0<sup>[3]</sup></td>
<td>12.10</td>
<td>
<p>6.1{{property_prefix("-webkit")}}<br>
9.0</p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown()}}</td>
<td>4.4</td>
<td>11</td>
<td>12.10</td>
<td>7.1{{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] En Gecko 18.0 {{geckoRelease("18.0")}} y 19.0 {{geckoRelease("19.0")}} el soporte de cajas flexibles está oculto en las preferencias <code>about:config</code> en <code>layout.css.flexbox.enabled</code>, por defecto en <code>false</code>.</p>
<p>[2] Las cajas flexibles multi-línea están soportadas desde Gecko 28.0 {{geckoRelease("28.0")}}.</p>
<p>[3] Internet Explorer 10-11 (pero no 12+) ignora el uso de <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> en la parte <code>flex-basis</code> de la sintaxis de flex. Esto se puede solucionar mediante el uso de las propiedades normales en lugar de las abreviadas. Ver <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> para más info. Además una declaración <code>flex</code> con un valor sin unidad en su parte <code>flex-basis</code> es considerado sintácticamente no valido en esas versiones y por lo tanto será ignorado. Una solución consiste en incluir siempre una unidad en la parte <code>flex-basis</code> del valor abreviador <code>flex</code>. Ver <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> para más info.</p>
<h2 id="See_also" name="See_also">Ver también</h2>
<ul>
<li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/">Usar las cajas felxibles de CSS</a></li>
</ul>