minmax()
La función minmax
()
en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.
/* 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)
Sintáxis
Una función que toma dos parámetros, min y max.
Cada parámetro puede ser un valor <length>
, <percentage>
, <flex>
o uno de los valores de las palabras clave max-content
, min-content
o auto
.
Si max < min, entonces max es ignorado y se trata a minmax(min,max)
como min. Como un máximo, un valor <flex>
(en-US) establece el factor flex de una banda; no es válido como un mínimo.
Valores
<length>
- Una medida no negativa.
<percentage>
- 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
<percentage>
debe ser tratado comoauto
. El user agent (en-US) 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. <flex>
(en-US)- Una dimension no-negativa con la unidad
fr
especificando el factor flex de la banda. Cada banda de tamaño<flex>
toma una parte del espacio disponible en proporción a su factor flex. max-content
- Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.
min-content
- Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.
auto
- Como un máximo, idéntico a
max-content
. Como un mínimo representa el mayor tamaño mínimo (como se especifica enmin-width
/min-height
) de los elementos de rejilla que ocupan la banda.
Sintáxis formal
Propiedades CSS
La función minmax()
puede ser usada dentro de:
Ejemplo
CSS
#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;
}
HTML
<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>
Resultado
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
CSS Grid Layout La definición de 'minmax()' en esta especificación. |
Candidate Recommendation | Definición inicial |
Compatibilidad de navegadores
BCD tables only load in the browser
Mira también
- Guía de Grid Layout: Conceptos básicos del diseño con rejilla - tamaño de bandas con minmax()
- Rejillas CSS, valores lógicos y modos de escritura
-
Video tutorial: Presentando minmax()