aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/minmax()
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
committerMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
commit9bf6693b2edd5281c1577856895c55653a41dc01 (patch)
tree0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/es/web/css/minmax()
parent376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff)
downloadtranslated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip
[CRON] sync translated content
Diffstat (limited to 'files/es/web/css/minmax()')
-rw-r--r--files/es/web/css/minmax()/index.html214
1 files changed, 0 insertions, 214 deletions
diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html
deleted file mode 100644
index 4b91d4aee7..0000000000
--- a/files/es/web/css/minmax()/index.html
+++ /dev/null
@@ -1,214 +0,0 @@
----
-title: minmax()
-slug: Web/CSS/minmax()
-tags:
- - CSS
- - CSS Grid
- - Diseño
- - Función CSS
- - Referencia
- - Rejilla CSS
- - Web
-translation_of: Web/CSS/minmax()
----
-<p>La función <code><strong>minmax</strong></code><strong><code>()</code></strong> <a href="/en-US/docs/Web/CSS">en CSS</a> define un rango de tamaño mayor o igual que <var>min</var> y menor o igual que <var>max</var>. Se emplea con <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">rejillas CSS</a>.</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* valores &lt;ancho no-flexible&gt;, &lt;ancho de la banda&gt; */
-minmax(200px, 1fr)
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(100px, max-content)
-minmax(min-content, 400px)
-minmax(max-content, auto)
-minmax(auto, 300px)
-minmax(min-content, auto)
-
-/* valores &lt;ancho fijo&gt;, &lt;ancho de la banda&gt; */
-minmax(200px, 1fr)
-minmax(30%, 300px)
-minmax(400px, 50%)
-minmax(50%, min-content)
-minmax(300px, max-content)
-minmax(200px, auto)
-
-/* valores &lt;ancho no-flexible&gt;, &lt;ancho fijo&gt; */
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(min-content, 200px)
-minmax(max-content, 200px)
-minmax(auto, 300px)
-</pre>
-
-<h2 id="Sintáxis">Sintáxis</h2>
-
-<p>Una función que toma dos parámetros, <em>min</em> y <em>max</em>.</p>
-
-<p>Cada parámetro puede ser un valor <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>, <code>&lt;flex&gt;</code> o uno de los valores de las palabras clave <code>max-content</code>, <code>min-content</code> o <code>auto</code>.</p>
-
-<p>Si <var>max</var> &lt; <var>min</var>, entonces <var>max</var> es ignorado y se trata a <code>minmax(min,max)</code> como <var>min</var>. Como un máximo, un valor {{cssxref("flex_value","&lt;flex&gt;")}} establece el factor flex de una banda; no es válido como un mínimo.</p>
-
-<h3 id="Valores">Valores</h3>
-
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>Una medida no negativa.</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <code>&lt;percentage&gt;</code> debe ser tratado como <code>auto</code>. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.</dd>
- <dt>{{cssxref("&lt;flex&gt;")}}</dt>
- <dd>Una dimension no-negativa con la unidad <code>fr</code> especificando el factor flex de la banda. Cada banda de tamaño <code>&lt;flex&gt;</code> toma una parte del espacio disponible en proporción a su factor flex.</dd>
- <dt><code>max-content</code></dt>
- <dd>Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.</dd>
- <dt><code>min-content</code></dt>
- <dd>Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.</dd>
- <dt><code>auto</code></dt>
- <dd>Como un máximo, idéntico a <code>max-content</code>. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.</dd>
-</dl>
-
-<h3 id="Sintáxis_formal">Sintáxis formal</h3>
-
-{{csssyntax}}
-
-<h3 id="Propiedades_CSS">Propiedades CSS</h3>
-
-<p>La función <code>minmax()</code> puede ser usada dentro de: </p>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-rows</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
-</ul>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css; highlight[3] notranslate">#container {
- display: grid;
- grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
- grid-gap: 5px;
- box-sizing: border-box;
- height: 200px;
- width: 100%;
- background-color: #8cffa0;
- padding: 10px;
-}
-
-#container &gt; div {
- background-color: #8ca0ff;
- padding: 5px;
-}
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;div id="container"&gt;
- &lt;div&gt;
- Elemento tan ancho como el contenido,&lt;br/&gt;
- pero de máximo 300 píxeles.
- &lt;/div&gt;
- &lt;div&gt;
- Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
- &lt;/div&gt;
- &lt;div&gt;
- Elemento inflexible de 150 píxeles de ancho.
- &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Resultado">Resultado</h3>
-
-<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th>Especificación</th>
- <th>Estado</th>
- <th>Comentario</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
- <td>{{Spec2("CSS Grid")}}</td>
- <td>Definición inicial</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
-
-
-
-<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
-
-<h2 id="Mira_también">Mira también</h2>
-
-<ul>
- <li>Guía de Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">Conceptos básicos del diseño con rejilla - tamaño de bandas con minmax()</a></em></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas CSS, valores lógicos y modos de escritura</a></li>
- <li>
- <p>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Presentando minmax()</a></em></p>
- </li>
-</ul>
-
-<section id="Quick_links">
-<ol>
- <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
- <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
- <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
- <ol>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del diseño con rejillas</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación a otros métodos de diseño</a></li>
- <li><a href="
-/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Diseño usando lineas con nombre</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en el diseño con rejillas</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineamiento de cajas en el diseño con rejillas</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y la Accesibilidad</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y una Mejora Progresiva</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Elaborando diseños comunes utilizando rejillas</a></li>
- </ol>
- </li>
- <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a>
- <ol>
- <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
- <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
- </ol>
- </li>
- <li data-default-state="open"><a href="#"><strong>Glosario</strong></a>
- <ol>
- <li><a href="/en-US/docs/Glossary/Grid">Rejilla</a></li>
- <li><a href="/en-US/docs/Glossary/Grid_lines">Líneas de rejilla</a></li>
- <li><a href="/en-US/docs/Glossary/Grid_tracks">Bandas de rejilla</a></li>
- <li><a href="/en-US/docs/Glossary/Grid_cell">Celdas de rejilla</a></li>
- <li><a href="/en-US/docs/Glossary/Grid_areas">Áreas de rejilla</a></li>
- <li><a href="/en-US/docs/Glossary/Gutters">Canaletes</a></li>
- <li><a href="/en-US/docs/Glossary/Grid_Axis">Eje de rejilla</a></li>
- <li><a href="/en-US/docs/Glossary/Grid_rows">Fila</a></li>
- <li><a href="/en-US/docs/Glossary/Grid_column">Columna</a></li>
- </ol>
- </li>
-</ol>
-</section>