Como desarrolladores front-end usualmente debemos alinear verticalmente cualquier tipo de contenido, o definir una grilla de columnas con la misma altura, por ejemplo. Antes de CSS3 este tipo de tareas se hacían de una manera improvisada y quizás sucia, y estas soluciones no siempre funcionaban en todos los escenarios. Afortunadamente para nosotros, CSS3 trajo consigo una nueva característica para tratar con elementos de contenido dinámico y mostrarlos de una manera que funcione en cualquier situación.

Flexbox nos permite distribuir espacio para varios elementos basado en múltiples parámetros. Podemos alinear, cambiar el tamaño, la dirección e incluso el orden de los elementos a nuestro gusto. A continuación hablaré sobre los conceptos básicos de esta característica.

Estructura flex

El container flex se define con la regla display: flex;, éste puede ser cualquier elemento de bloque y le da propiedades flex a sus elementos hijos, llamados items. Los containers e items tienen propiedades específicas, y las reglas definidas para los ítems pueden anular las reglas definidas por el container. Flexbox trabaja con dos ejes, el eje principal (horizontal, dirección de derecha a izquierda por defecto), y el eje transversal (vertical, dirección de arriba hacia abajo por defecto). Este comportamiento también se puede cambiar a nuestro gusto. En la siguiente imagen se puede observar la diferencia entre el container (borde azul) y los ítems (borde oscuro).

Propiedades del container

Como dije previamente, debemos definir el valor de display como flex o (inline-flex) en el elemento que usaremos como container. Al hacer esto, tenemos acceso a las siguientes propiedades:

flex-direction cambia la dirección del eje principal. Entre los valores posibles para esta propiedad tenemos: row, column, row-reverse and column-reverse. Los valores row (fila) y column (columna) tienen el mismo comportamiento que el predefinido para el eje principal y el eje transversal, respectivamente. Los valores con el sufijo reverse cambiarán el sentido del eje principal manteniéndose en la misma linea (este comportamiento aplica para cualquier propiedad en que sean usados estos valores).

flex-wrap nos permite acomodar ítems en múltiples líneas, en vez de una única línea que es el comportamiento por defecto. Los valores posibles para esta propiedad son: no-wrap (default), wrap, and wrap-reverse. Este último valor cambiará la dirección de las líneas añadidas.

justify-content define la alineación de los elementos en el eje principal. Con esta propiedad podemos usar el espacio sobrante (como el de la primera imagen) y distribuirlo como lo consideremos conveniente. Valores:

  • flex-start: los ítems serán alineados en el origen (equivale a alinearlos a la izquierda en la dirección por defecto). Predefinido.
  • flex-end: los ítems son alineados al final (equivale a alinearlos a la derecha en la dirección por defecto).
  • center: Todos los ítems serán centrados en la línea.
  • space-between: el primer ítem será alineado al inicio, el último irá al final, y los ítems restantes tendrán un espacio similar entre ellos.
  • space-around: los ítems tendrán igual cantidad de espacio alrededor de ellos.

align-items define la alineación en el eje transversal, es similar a justify-content. Valores:

  • flex-start: igual que en justify-content,
  • flex-end: igual que en justify-content,
  • center: igual que en justify-content,
  • baseline: los ítems son alineados de acuerdo a sus líneas base.
  • stretch: los ítems se repartirán el espacio en el container. Predefinido.

Este es un pequeño ejemplo de cómo usar justify-content y align-items al tiempo. Así de fácil podemos centrar horizontal y verticalmente un elemento.

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

align-content se comporta como justify-content, pero toma el container como referencia y funciona para múltiples líneas de ítems. Valores:

  • flex-start: igual que en justify-content, comienza en el inicio del container,
  • flex-end: igual que en justify-content, comienza en el final del container,
  • center: todas las líneas de ítems se ubican en el medio del container,
  • space-between: el espacio restante es distribuído entre las líneas, como en justify-content,
  • space-around: distribuye el espacio restante alrededor de las líneas como en justify-content,
  • stretch: cada línea ocupa una porción equivalente del espacio restante. Predefinido.

Propiedades de los ítems

order: Los elementos se muestran en el orden que aparecen en el código por defecto, pero ese comportamiento puede cambiar con esta propiedad. Puede tomar cualquier valor entero; cada elemento se mostrará de acuerdo a su valor en órden ascendente.

flex-grow indica proporción, así que un elemento con valor de 2 tomará el doble de tamaño que un elemento con valor de 1 para esta propiedad. El valor predefinido es 0 y puede tomar cualquier valor entero positivo.

flex-shrink permite que el ítem se encoja si es necesario. Recibe un valor positivo entero e indica proporción igual que flex-grow. Por ejemplo, si un ítem tiene valor de 3 para esta propiedad, se encojerá tres veces más que el resto de los ítems. El valor predefinido es 1.

flex-basis nos permite definir el tamaño por defecto de un elemento antes de distribuir el espacio restante. La clave auto buscará valores definidos en las propiedades width o height. Puede tomar cualquier valor de longitud.

flex es una propiedad abreviada para flex-grow, flex-shrink y flex-basis, en ese orden.

align-self tiene el mismo comportamiento que align-items, pero sólo modific la alineación del elemento donde esta propiedad esté definida. Puede tomar los valores de align-items.

Se debe destacar que las propiedades float, clear and vertical-align (¿de verdad?) no funcionan en un ítem flex. No las vamos a extrañar, ya que con Flexbox podemos distribuir el espacio y la disposición de los elementos de la forma que queramos.


Comments