Flexbox CSS

October 4, 2022 • 12 minutos de lectura • ¿Errores o sugerencias? Edita el artículo

Es un sistema de diseño de layout uni-dimesional, o en una sola dirección: fila o columna. Sirve para distribuir espacios y posicionar los elementos de nuestra página.

Fundamentos

Contenedor flex

Caja flexible cuyo propiedad de display es flex.

Ítems flex

Elementos hijos directos del contenedor flex.

Dirección flex

Especifica la dirección del contenedor (fila o columna) además del sentido de los ítems flex (normal o reverso).

Ejemplo

En este ejemplo son 2 ítems con dirección flex de fila, en un sentido normal de izquierda a derecha.

Además, el primer ítem a su vez usa flex interno con una dirección de columna, en sentido de arriba a abajo.