CSS3 introduce un nuevo modelo de caja: el modelo de caja flexible, que determina cómo se distribuye una caja entre otras cajas y cómo se maneja el espacio disponible. Esto es similar a XUL (el lenguaje de interacción del usuario utilizado por Firefox), y otros lenguajes también usan el mismo modelo de caja, como XAML y GladeXML.
Con este modelo, puede crear fácilmente un diseño fluido que se adapte a la ventana del navegador o un diseño flexible que se adapte al tamaño de fuente. Los ejemplos de este artículo utilizan el siguiente código HTML:
<cuerpo>
<div id="caja1">1</div>
<div id="caja2">2</div>
<div id="caja3">3</div>
</cuerpo>
El modelo de caja tradicional organiza las cajas verticalmente según el flujo HTML. Usando el modelo flexbox puedes especificar un orden específico e invertirlo. Para habilitar el modelo de caja flexible, simplemente establezca el valor del atributo de visualización del cuadro con cuadros secundarios en cuadro (o cuadro en línea).
pantalla: caja;
Distribución horizontal o vertical
"box-orient" define los ejes de coordenadas de la distribución: vertical y horizontal. Estos dos valores definen cómo se muestra el cuadro.
cuerpo{
pantalla: caja;
orientación de caja: horizontal;
}
distribución inversa
"box-direction" puede establecer el orden en que aparecen los cuadros. De forma predeterminada, solo necesita definir el eje de distribución: los cuadros se distribuyen con el flujo html. Si es un eje horizontal, se distribuye de izquierda a derecha; si es un eje vertical, se distribuye de arriba a abajo. Defina el valor del atributo de "box-direction" como "reverse" para invertir el orden de los cuadros.
cuerpo {
pantalla: caja;
orientación de caja: vertical;
dirección de la caja: inversa;
}
distribución específica
El atributo "box-ordinal-group" define el orden en el que se distribuyen las cajas. El orden de distribución se puede controlar a voluntad. Los grupos se definen con un número que comienza en "1" y el modelo de caja distribuirá estos grupos primero y todas estas cajas estarán en cada grupo. La distribución se ordenará de pequeña a grande.
cuerpo {
pantalla: caja;
orientación de caja: vertical;
dirección de la caja: inversa;
}
#caja1 {
grupo-ordinal-de-cuadro: 2;
}
#caja2 {
grupo-ordinal-de-cuadro: 2;
}
#caja3 {
grupo-ordinal-de-cuadro: 1;
}
