diff options
Diffstat (limited to 'files/es/web/css/flex')
| -rw-r--r-- | files/es/web/css/flex/index.html | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/files/es/web/css/flex/index.html b/files/es/web/css/flex/index.html new file mode 100644 index 0000000000..9e89e10b6b --- /dev/null +++ b/files/es/web/css/flex/index.html @@ -0,0 +1,208 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |