From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/fit-content/index.html | 119 ++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/es/web/css/fit-content/index.html (limited to 'files/es/web/css/fit-content') diff --git a/files/es/web/css/fit-content/index.html b/files/es/web/css/fit-content/index.html new file mode 100644 index 0000000000..fc3cceef6f --- /dev/null +++ b/files/es/web/css/fit-content/index.html @@ -0,0 +1,119 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content +tags: + - CSS + - CSS Grid + - Experimental + - Función CSS + - Layout + - Referencia + - Web +translation_of: Web/CSS/fit-content +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La función CSS fit-content() ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: min(maximum size, max(minimum size, argument)).

+ +
/* <length> values */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* <percentage> value */
+fit-content(40%)
+
+ +

La función se puede usar como un tamaño de track en las propiedades de CSS Grid, donde el tamaño máximo es definido por max-content y el mínimo por auto, el cual es calculado por "auto" (ej. minmax(auto, max-content)), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .

+ +

También puede usarse como tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}, donde el tamañó máximo se refiere al tamaño máximo contenido y el mínimo al tamaño mínimo contenido.

+ +

Sintaxis

+ +

Función que acepta un  <length> o un <percentage> como un argumento.

+ +

Values

+ +
+
{{cssxref("<length>")}}
+
Una Longitud Absoluta.
+
{{cssxref("<percentage>")}}
+
Un porcentaje relativo al espacio disponible en los ejes dados.
+
In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>Item as wide as the content.</div>
+  <div>
+    Item con más texto en él. Porque el contenido que es
+    mas grande que el ancho máximo, está restringido a los
+    300 pixeles.
+  </div>
+  <div>Flexible item</div>
+</div>
+ +

Result

+ +

{{EmbedLiveSample("Ejemplo", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}Define la función como el tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}.
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}Define la función cuando es usada como un tamaño de track.
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("css.properties.grid-template-columns.fit-content")}}

+ +

 

-- cgit v1.2.3-54-g00ecf