Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 XI

Cajas flexibles

nuevo tipo de diseño

En CSS3, además de las formas tradicionales de diseñar la página (propiedades position o float hay una nueva forma de diseñar la página, mediante "cajas flexibles" o "FlexBox". El diseño "FlexBox" prescinde de algunas propiedades como float o columns, pero se gana en simplicidad. Un "FlexBox" es en sí un elemento de bloque, aunque también puede declararse como elemento en línea. En un "FlexBox" tanto él como sus elementos hijos tienen una serie de propiedades especiales.

Para convertir un elemento contenedor en un "FlexBox" utilizaremos la propiedad display con un nuevo valor:

#capa1 { display: box; }

A día de hoy (octubre 2011) sólo Firefox, Safari y Chrome soportan de forma experimental el diseño de cajas flexible, es decir con el prefijo -moz- para Firefox y el prefijo -webkit- para Safari y Chrome. El nuevo valor de la propiedad display también lleva estos prefijos:

#capa1 { display: -moz-box; display: -webkit-box;}

Para ver los resultados del diseño de caja en estos navegadores, todas las propiedades que veremos a continuación deben llevar el prefijo -moz- para Firefox, y -webkit- para Safari y Chrome.


Propiedad box-direction

La propiedad box-direction afecta a los elementos de bloque hijos del "FlexBox", e indica el orden en que aparecen. Esta es su sintaxis:

box-direction: normal | reverse | inherit;

Sus posibles valores son: normal: los elementos aparecen alineados en el orden normal; reverse : los elementos aparecen alineados en orden inverso, es decir, aparecen de derecha a izquierda; inherit : heredan el comportamiento del elemento padre.

Por defecto los elementos hijos del "FlexBox" aparecen alineados (se comportan como las imágenes). por lo que tanto con el valor normal como con el valor reverse aparecerán alineados, pero con el valor reverse aparecerán de derecha a izquierda, es decir, al revés.

Si queremos utilizarlo para hacer una página no nos olvidemos de escribir la propiedad varias veces con los prefijos -moz- para Firefox y -webkit- para Safari y Chrome (únicos navegadores en los que funciona). Esto es así para todas las propiedades que veamos relacionadas con los "FlexBox".

En el siguiente enlace se ve una página con ejempos de la propiedad box-direction (Debes usar Firefox, Safari o Chrome para verla bien).

Propiedad box-direction

Si has mirado el enlace del ejemplo con los dos tipos de navegadores (Firefox y Safari) verás que el resultado no es exactamente igual. En Firefox, con el valor reverse las cajas se alinean a la derecha mientras que en Safari, aunque aparecen en orden inverso, están alineadas a la izquierda. Además para mantener la altura de las cajas en Firefox debemos usar max-height mientras que en Safari debemos usar heigh.

Estas diferencias entre navegadores se deben a que la propiedad está todavia en un estado experimental. esperemos que en un futuro se unifique y se presente de la misma manera en todos los navegadores.


Propiedad box-pack

La propiedad box-pack indica cual será la alineación (en horizontal) de los elementos de bloque hijos del "FlexBox". su sintaxis es la siguiente:

box-pack: start | end | center | justify;

Sus posibles valores son las siguientes palabras clave:

En el siguiente enlace se ve una página con ejempos de la propiedad box-pack (Debes usar Firefox, Safari o Chrome para verla bien).

Propiedad box-pack

De nuevo Firefox y Safari no coinciden plenamente en el desarrollo de esta propiedad, ya que Firefox no soporta el valor justify.

Para corregir el efecto en Firefox de la propiedad anterior: -moz-box-direction: reverse debemos reubicar la posición de sus elementos mediante -moz-box-pack: end. Le damos el valor end porque Firefox en box-direction no cambia el orden de los elementos, sino el flujo de éstos dentro de la caja.


Propiedad box-orient

La propiedad box-orient especifica si los elementos hijos de una "FlexBox" se colocan en horizontal o vertical. Su sintaxis es la siguiente:

box-orient: horizontal | vertical | inline-axis | block-axis | inherit;

Sus posibles valores son las siguientes palabras clave:

En el siguiente enlace se ve una página con ejempos de la propiedad box-orient (Debes usar Firefox, Safari o Chrome para verla bien).

Propiedad box-orient


Propiedad box-align

La propiedad box-align> permite la alineación vertical de los elementos hijos de la caja. su sintaxis es la siguiente:

box-align: start | end |center |baseline | stretch;

Sus posibles valores son las siguientes palabras clave:

Los valores baseline y stretch no son aceptados en ningún navegador, por lo que su efecto es el mismo que para el valor start.

En el siguiente enlace se ve una página con ejempos de la propiedad box-align (Debes usar Firefox, Safari o Chrome para verla bien).

Propiedad box-align


Propiedad box-ordinal-group

La propiedad box-ordinal-group indica el orden en el que se colocan los elementos dentro de la caja. La propiedad se aplica a los elementos en sí y no a la caja, por lo que el selector debe indicar el elemento correspondiente. El valor de esta propiedad será un número entero positivo que indicará el número de orden del elemento. Su sintaxis es:

box-ordinal-group: <entero>;

Veamos un ejemplo en el que cambiamos el orden de las cajas: el código CSS será el siguiente:

#capa1 { display: box; display: -moz-box; display: -webkit-box;  }
.e1, .e2, .e3, .e4 { background-color: yellow; margin: 5px; }
.e1 { box-ordinal-group: 4; -moz-box-ordinal-group: 4; -webkit-box-ordinal-group: 4; }
.e2 { box-ordinal-group: 3; -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; }
.e3 { box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; }
.e4 { box-ordinal-group: 2; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; }

y el código HTML de esta caja será el siguiente:

<div id="capa1">
<div class="e1">Primero</div>
<div class="e2">Segundo</div>
<div class="e3">Tercero</div>
<div class="e4">Cuarto</div>
</div>

El resultado es el siguiente (Recuerda que sólo lo verás bien si usas Firefox, Safari o Chrome):


Primero
Segundo
Tercero
Cuarto

Si usas Firefox, Safari o Chrome verás que el orden de los elementos ha cambiado, y que está indicado en los valores de la propiedad box-orient-group.


Propiedad box-flex

La propiedad box-flex hace que los elementos se extiendan a lo largo se su línea siempre que haya sitio para ello, convirtiéndose en flexibles. Si tienen una alineación horizontal con box-orient: horizontal o box-orient: inline-axis , los elementos se extenderán a lo ancho. Con alíneación vertical (box-orient: vertical o box-orient: block-axis) los elementos se extenderán a lo alto.

Esta propiedad se aplica a cada uno de los elementos y no a la caja, por lo que el selector debe apuntar al elemento en sí y no a la caja. En una misma caja puede haber elementos flexibles y no flexibles.

Esta propiedad es soportada sólo por Firefox, Safari y Chrome no la admiten, y su valor será un número. Esta es su sintaxis:

box-flex: <número>;

Si el número es menor que 1 el elemento será no flexible, y si el número es 1 o mayor que 1 el elemento será flexible; por lo que en la práctica sus valores son: 0: no-flexible y 1: flexible.

En el siguiente enlace se ve una página con ejempos de la propiedad box-flex (Debes usar Firefox para verlo bien).

Propiedad box-flex


Nuevas tendencias

El modelo que hemos explicado en esta página es el que define el W3C (World Wide Web Consortium) en Julio de 2009. Recientemente ha revisado este modelo y lo ha redefinido de una forma similar, está publicado en Marzo de 2011. Ningún navegador ha adaptado todavía este nuevo modelo.

El nuevo modelo del W3C básicamente cambia la sintaxis: creamos la caja mediante display: flexbox y cambia el prefijo box de las propiedades por el prefijo flex. Además cambian algunas propiedades, por ejemplo la propiedad box-orient y la orientación se incluye dentro de la propiedad de direccion flex-direction.

Si quieres ver más detalles sobre esta nueva forma que propone la W3C puedes verlo en su página Flexible Box Layout Module, W3C Working Draft, 22 March 2011






En la siguiente página veremos otras propiedades que también aparecen por primera vez en CSS3

Otras propiedades.



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo