Organizando elementos flexibles

Por defecto, los elementos dentro de un contenedor flexible se muestran horizontalmente en la misma línea, pero no se organizan con una orientación estándar. Un contenedor flexible usa ejes para describir la orientación de su contenido. La especificación declara dos ejes que son independientes de la orientación: el eje principal y el eje transversal. El eje principal es aquel en el que se presenta el contenido (normalmente es equivalente a la orientación horizontal), y el eje transversal es el perpendicular al eje principal (normalmente equivalente a la orientación vertical). Si la orientación cambia, los ejes se desplazan junto con el contenido.

Las propiedades definidas para este modelo trabajan con estos ejes y organizan los elementos desde sus extremos: main-start, main-end, cross-start y cross-end. La relación entre estos extremos es similar a la relación entre los extremos izquierdo y derecho, o superior e inferior usados para describir la dirección horizontal y vertical en modelos convencionales, pero en este modelo esa relación se invierte cuando la orientación cambia. Cuando uno de estos extremos, como main-start, se menciona en la descripción de una propiedad, debemos recordar que puede referirse al extremo izquierdo o superior, dependiendo de la orientación actual del contenedor (en la imagen anterior, por ejemplo, el extremo main-start está referenciando el lado izquierdo del contenedor, mientras que en el diagrama de la derecha referencia el extremo superior).

Una vez que entendamos cómo trabaja con este modelo, podemos cambiar la organización de las cajas. CSS ofrece las siguientes propiedades con este propósito.

flex-direction – Esta propiedad define el orden y la orientación de las cajas en un contenedor flexible. Los valores disponibles son row, row-reverse, column y columnreverse, con el valor row configurado por defecto.

order – Esta propiedad especifica el orden de las cajas. Acepta números enteros que determinan la ubicación de cada caja.

justify-content – Esta propiedad determina cómo se va a distribuir el espacio libre. Los valores disponibles son flex-start, flex-end, center, space-between, y space-around.

align-items – Esta propiedad alinea las cajas en el eje transversal. Los valores disponibles son flex-start, flex-end, center, baseline, y stretch. 

align-self – Esta propiedad alinea una caja en el eje transversal. Trabaja como alignitems pero afecta cajas de forma individual. Los valores disponibles son auto, flexstart, flex-end, center, baseline, y stretch.

flex-wrap – Esta propiedad determina si se permiten crear múltiples líneas de cajas. Los valores disponibles son nowrap, wrap, y wrap-reverse.

align-content – Esta propiedad alinea las líneas de cajas en el eje vertical. Los valores disponibles son flex-start, flex-end, center, space-between, space-around, y stretch.

Si lo que necesitamos es configurar la dirección de las cajas, podemos usar la propiedad flex-direction. Esta propiedad se asigna al contenedor con un valor que corresponde al orden que queremos otorgar al contenido. El valor row declara la orientación de las cajas de acuerdo a la orientación del texto (normalmente horizontal) y ordena las cajas desde mainstart a main-end (normalmente de izquierda a derecha). El valor row-reverse declara la misma orientación que row, pero invierte el orden de los elementos desde main-end a mainstart (normalmente de derecha a izquierda). El valor column declara la orientación de acuerdo a la orientación en la cual se presentan los bloques de texto (normalmente vertical) y ordena las cajas desde main-start a main-end (normalmente de extremo superior a inferior). Y finalmente, el valor column-reverse declara la misma orientación que column, pero invierte el orden de los elementos desde main-end a main-start (normalmente de extremo inferior a superior). El siguiente ejemplo revierte el orden natural de una línea de cajas.

Contenido externo para leer y analizar.

Lectura:

• A Complete Guide to Flexbox
• Usando las cajas flexibles CSS
• Compatibilidad con versiones anteriores de Flexbox

Experimentos:

• CSS Flexbox Please!
• Flexy Boxes

Juegos:

• Flexbox Froggy (Juego de la ranita)