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

Si desea personalizar el orden y la orientación del contenido de un contenedor flexible, tiene que utilizar la propiedad flex-direction, que tiene cuatro valores posibles: row, row-reverse, column y column-reverse, con row como valor predeterminado.

row: Este valor fija la orientación de acuerdo con la orientación del texto (generalmente horizontal) y ordena a los elementos dentro del contenedor desde el inicio hasta el final del eje principal (por lo general de izquierda a derecha).

row-reverse: Este valor establece la misma orientación que row, pero invierte el orden de los elementos desde el final del eje principal hacia el inicio del mismo (generalmente de derecha a la izquierda).

column: Este valor fija la orientación de acuerdo a la forma en la que se distribuyen los bloques de texto (generalmente de forma vertical) y ordena a los hijos desde el inicio del eje principal hacia el final de éste (por lo general de arriba a abajo).

column-reverse: Este valor establece la misma orientación que column pero invierte el orden de los elementos, que por tanto es desde el final hacia el inicio del eje principal (generalmente de abajo hacia arriba).

Código 2-48

Cambio de la orientación de los hijos.

Conceptos básicos

La propiedad writing-mode establece que la orientación de las líneas de texto sea horizontal o vertical. Por esta razón el resultado de las propiedades del Modelo de caja flexible dependerá de la orientación previamente establecida para el texto. Para obtener más información sobre esta propiedad, por favor visite nuestro sitio web y siga los enlaces de este capítulo.