Conceptos Prácticos y Ejemplos de CSS FlexBox: Guía en Español - Parte 2

2 min read

Updated: Aug 29, 2023

Guía práctica y visual sobre las propiedades básicas de Flexbox 🎨

Flexbox trata de una Caja Flexible que puede contener varios elementos también flexibles

Antes de seguir leyendo, recuerda que este post hace parte de una miniserie y probablemente para algunos ejemplos necesites ponerte en contexto con el post anterior, te invitamos a revisarlo: Conceptos y Ejemplos Prácticos de CSS FlexBox: Guía en Español - Parte 1.

En este artículo continuamos con el repaso práctico sobre las principales propiedades de Flebox, y sus respectivos ejemplos.

FLEXBOX

TALK DE LA SEMANA

Align-items

Es como un justify-content, pero que trabaja desde el eje perpendicular al eje principal. Por ende maneja las mismas propiedades:

.container {
  align-items: flex-start | flex-end | center | stretch | baseline;
}

flex-start/start: self-start Los elementos se colocan al principio del eje transversal respetando las writing-mode reglas.

flex-end/end: self-end Los elementos se colocan al final del eje transversal respetando las writing-mode reglas.

center: los elementos están centrados en el eje transversal.

stretch (predeterminado): Todos los elementos se estiran para poder llenar el contenedor respetando al mismo tiempo, el ancho mínimo y ancho máximo del contenedor

baseline: Cuando los ítems son alineados según líneas base del texto de cada elemento.

Align definirá siempre el comportamiento por defecto de los elementos que están en sentido contrario al eje principal, por lo que se puede confundir erróneamente con la alineación vertical de un contenedor. Acá te dejamos un ejemplo:

Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.

Align-self

Te permite anular la alineación especificada por align-items. Es decir, para algunos ítems flexibles la alineación general puede ser distinta de forma individual.

.container {
  align-self: flex-start | flex-end | center | baseline | stretch;
}

Align-content

Mantiene el orden de los ítems de un contenedor flexible, por ejemplo, cuando hay espacio adicional en el eje transversal se alinean los elementos individuales dentro del eje principal.

Estos son algunos ejemplos, tomado de CSS-Tricks.

Order

Los ítems flexibles en un contendor flexible se colocan en orden según se estructuren en el flujo del código. Sin embrago, es posible cambiar este orden usando la propiedad: order.

element {
  order: -1 | 0 | 1 ... ;
}

De forma predeterminada, en un contenedor flexible con varios elementos contenidos, recibirá cada uno el valor de 0, si quieremos modificar el orden el valor, este debe ser mayor o menor, ejemplo:

Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.

Grid vs Flexbox

Cada diseño CSS exige algunas características que pueden ir bien con cualquiera de las dos opciones:

Flexbox es unidimensional: Se usa con los ítems del eje fila (row) y columna (column).
CSS Grid es bidimensional: Suele implementarse para diseños más complejos. Es importante también revisar la documentación, en recursos al final del post dejamos algunos link que te pueden ayudar.

Algunos comentarios finales:

Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.

Recursos

A Complete Guide to Flexbox de CSS-Tricks con muy buenos ejemplos visuales.
W3schools - flex-grow ideal para revisar la información de grow dada en la 1ra parte.
Guía de conceptos básicos de Flexbox de MDN incluye tabla de soporte en navegadores.
Un recurso útil para aprender Flexbox y divertirse es Flexbox Froggy