Advertencia: Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles 'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).
Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.
Resumen
Las propiedades CSS-moz-box-flex y -webkit-box-flex especifican cómo una -moz-box o -webkit-box crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.
| Valor inicial | 0 |
|---|---|
| Applies to | elements that are direct children of an element with a CSS display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-box |
| Heredable | no |
| Media | visual |
| Valor calculado | como se especifica |
| Animatable | no |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Síntaxis
/* Valores <number> */ -moz-box-flex: 0; -moz-box-flex: 3; -webkit-box-flex: 0; -webkit-box-flex: 3; /* Valores gloables */ -moz-box-flex: inherit; -moz-box-flex: initial; -moz-box-flex: unset;
Valores
- 0
- La caja no crece.
- > 0
- La caja crece para rellenar un proporción del espacio disponible..
Síntaxis Formal
<number>
Ejemplos
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de -moz-box-flex</title>
<style>
div.example {
display: -moz-box;
display: -webkit-box;
border: 1px solid black;
width: 100%;
}
div.example > p:nth-child(1) {
-moz-box-flex: 1; /* Mozilla */
-webkit-box-flex: 1; /* WebKit */
border: 1px solid black;
}
div.example > p:nth-child(2) {
-moz-box-flex: 0; /* Mozilla */
-webkit-box-flex: 0; /* WebKit */
border: 1px solid black;
}
</style>
</head>
<body>
<div class="example">
<p>Creceré para rellenar un espacio extra</p>
<p>No creceré</p>
</div>
</body>
</html>
Notas
La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.
Los elementos dentro del contenedor que tienen 0 flex no crecen.
Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.
Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.
Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.
Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize de la caja contenedora a always. Este atributo no tiene correspondencia con ninguna propiedad CSS.
Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1).
Especificaciones
Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex , pero ese borrador nunca ha sido sustituido.
Compatibilidad con los distintos navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Soporte básico | No support | (Yes) | No support | No support | No support |
| característica | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Soporte básico | No support | No support | ? | No support | No support | No support |