Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 68

Visitas el mes pasado: 107

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (XI)

Cajas flexibles

imagen css3

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 (marzo 2014) Sólo admite la propiedad en su forma estándar el navegador Opera. Firefox, Safari y Chrome admiten la propiedad de forma experimental, es decir con el prefijo -moz- para Firefox y el prefijo -webkit- para Safari y Chrome. Internet Explorer no admite esta propiedad. El nuevo valor de la propiedad display también lleva estos prefijos, por lo que pondremos:

#capa1 { display: box; 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 escribirse varias veces con los prefijos correspondientes de los navegadores para Firefox y Safari - 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 para cada navegador. El resto de propiedades que veremos relacionadas con los "FlexBox" funcionan también en los mismos navegadores de forma experimental, por o que deberemos también repetirlas varias veces con lo prefijos.

En el siguiente enlace se ve una página con ejempos de la propiedad box-direction (Utiliza un navegador compatible para visualizarla).

Propiedad box-direction


Si has mirado el enlace del ejemplo con los distintos tipos de navegadores 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 el resto de navegadores, 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, Chrome y Opera 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 ().

Propiedad box-pack


De nuevo los distintos navegadores no coinciden plenamente en el desarrollo de esta propiedad, ya que Firefox no soporta el valor justify.


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 (como el resto de propiedades, esta tampòco funciona en Internet Explorer):


Primero
Segundo
Tercero
Cuarto

Aquí el orden de los elementos ha cambiado, ya 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, Chrome y Opera 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; éste último está publicado en Marzo de 2011. Ningún navegador ha adaptado todavía este último modelo.

Este nuevo modelo del W3C (el de 2011) 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 de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com