diff options
author | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
commit | 9bf6693b2edd5281c1577856895c55653a41dc01 (patch) | |
tree | 0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/es/web/css/minmax() | |
parent | 376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff) | |
download | translated-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.html | 214 |
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 <ancho no-flexible>, <ancho de la banda> */ -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 <ancho fijo>, <ancho de la banda> */ -minmax(200px, 1fr) -minmax(30%, 300px) -minmax(400px, 50%) -minmax(50%, min-content) -minmax(300px, max-content) -minmax(200px, auto) - -/* valores <ancho no-flexible>, <ancho fijo> */ -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><length></code>, <code><percentage></code>, <code><flex></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> < <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","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.</p> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>Una medida no negativa.</dd> - <dt>{{cssxref("<percentage>")}}</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><percentage></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("<flex>")}}</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><flex></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 > div { - background-color: #8ca0ff; - padding: 5px; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div id="container"> - <div> - Elemento tan ancho como el contenido,<br/> - pero de máximo 300 píxeles. - </div> - <div> - Elemento con un ancho flexible, pero con un mínimo de 200 píxeles. - </div> - <div> - Elemento inflexible de 150 píxeles de ancho. - </div> -</div></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> |