Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 76

El propósito principal de un modelo de caja es hacer que sea posible dividir el espacio de la ventana en varias cajas y, así, crear las filas y columnas que formen un diseño web regular. Sin embargo, el Modelo de caja tradicional, aplicado desde la primera versión de CSS y ampliamente utilizado hoy en día, fracasa en ese sentido. Por ejemplo, con este modelo no es posible definir de manera eficiente cómo se distribuyen las cajas y especificar su tamaño horizontal y vertical sin usar trucos y reglas intrincadas programadas por un tipo brillante en algún lugar del mundo.

Importante

Aunque el Modelo de caja flexible tiene ventajas sobre el modelo anterior, todavía es experimental y de momento no puede ser adoptado por navegadores y desarrolladores. En la actualidad existen dos especificaciones disponibles y una de ellas de momento solo es compatible con Google Chrome. Por eso tratamos la utilización del Modelo de caja tradicional en profundidad. Debe tener en cuenta estas cuestiones antes de escoger un modelo u otro. Al final del libro explicaremos cómo desarrollar diferentes versiones de una página web para todo tipo de navegadores, compatibles o no con HTML5.

Las dificultades para crear efectos simples como ampliar varias columnas de acuerdo con el espacio disponible, centrar verticalmente el contenido o ampliar una columna de arriba a abajo independientemente de su contenido, hizo que los desarrolladores comenzaran a pensar en cómo aplicar nuevos modelos a sus documentos y el Modelo de caja flexible es el que ha tenido más éxito de momento.

El Modelo de caja flexible resuelve los problemas del Modelo de caja tradicional de una manera elegante. En este nuevo modelo las cajas finalmente representan las filas y columnas virtuales que diseñadores y usuarios realmente ven en pantalla, y que son, de hecho, lo que les preocupa a los primeros. Con este modelo se consigue un control total sobre el diseño, la posición y el tamaño de las cajas, la distribución de unas cajas dentro de otras, y la forma en la que éstas usan y comparten el espacio disponible. Finalmente el código satisface las necesidades de los diseñadores.

En esta sección del capítulo veremos cómo funciona el modelo de caja flexible, sus ventajas y cómo puede ser aplicado a un documento HTML.