Cajas flexibles con CSS3

Sucede y pasa que a veces estamos estructurando el contenido de un sitio web y hay secciones que tienen varios elementos informativos y es necesario que todos se vean en el mismo espacio, y de forma ordenada. Antes de aprender a usar el modelo de cajas flexibles empleaba para hacer ese tipo de trabajos varios elementos div, los hacía flotar, les cambiaba el ancho y alto, los acomodaba según debía y los agrupaba -si era necesario- en otro div. De hecho, muchos lo hacían en sus sitios. La buena nueva es que eso se acabó con la introducción del nuevo atributo para la propiedad display de las hojas de estilo.

Antes que nada, para ampliación dejo el enlace al sitio donde aprendí sobre este elemento ya que el mismo maneja unas matemáticas que no creo poder explicar bien. Para usar la propiedad display:box; es necesario tener los divs que funcionaran como cajas dentro de otro div… Se hace un poco necesario para que ese div funcione como una caja donde se acomodaran las demás cajas :D. Algo así:

<div style="display:box;">
<div style="width:250px; box-flex:1;">Contenido...</div>
<div style="width:250px; box-flex:2;">Contenido...</div>

</div>

En la hoja de estilos determinamos como se ajustaran los divs internos usando la propiedad box-flex y un valor numérico para que se acomoden o tengan un orden dentro de la caja que los contiene. Y aquí vienen otra vez unos asuntos con matemáticas donde intervienen los margenes, el padding y otras propiedades. En el artículo de smashing magazine está más explicadito y con otros detalles como transiciones y más.

Para finalizar, hay que recordar que los navegadores siguen los estándares pero no se estandarizan, es decir, cada empresa de las que desarrollan navegadores (Google, Mozilla, Opera) programa el motor de su navegador como le conviene y nos toca usar prefijos para las propiedades como -webkit-, -o- y -moz-. Entonces tendríamos que tener algo como:

.caja{ 
    display:-webkit-box; 
    display:-moz-box; 
    display:-o-box; 
    display:box; 
} 
.caja_1{ 
    -webkit-box-flex:1; 
    -moz-box-flex:1; 
    box-flex:1; 
} 
.caja_2{ 
    -webkit-box-flex:2; 
    -moz-box-flex:2; 
    box-flex:2; 
}

 

Cambie un poco el código para que quedará algo más reutilizable en el sitio donde lo implemento. La clase .caja la aplico para el div que actúa como caja contenedora y .caja_1 y .caja_2 para las otras cajas que vayan dentro de la caja -vaya trabalenguas.

Anuncios

Autor: cesc1989

Ingeniero de Sistemas que le gusta escribir y compartir sobre recursos que considera útiles, además que le gusta leer manga y ver anime.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s