CSS: Fundamentos de Flex

Teoría: Contenedor flex


Cuando usamos Flexbox en CSS, lo primero que debemos entender es que hay dos elementos clave:

  • El contenedor flex: Es el elemento padre que organiza sus elementos hijos con Flexbox.
  • Los elementos flexibles: Son los elementos hijos dentro del contenedor, que se comportan según las reglas de Flexbox.

En esta lección, veremos cómo convertir un elemento en un contenedor flex y cómo cambiar la dirección en la que se organizan sus elementos hijos.

Hacer un contenedor flex

Para activar Flexbox en un elemento, usamos la propiedad display con el valor flex.

¿Cómo se comporta el contenedor?

  • Un display: flex; hace que los elementos hijos se alineen automáticamente en una fila.
  • El contenedor sigue comportándose como un bloque normal, ocupando todo el ancho disponible.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

¿Y si quiero que el contenedor sea en línea?

Si en lugar de display: flex; usamos display: inline-flex;, el contenedor solo ocupará el espacio necesario, en lugar de todo el ancho disponible. Esto es útil cuando queremos que los elementos se ubiquen junto a otros elementos en la misma línea.

Cambiar la dirección del contenedor

Por defecto, los elementos dentro de un contenedor flex se alinean en una fila (de izquierda a derecha). Sin embargo, podemos cambiar esta dirección con la propiedad flex-direction.

Valores de flex-direction

ValorDescripción
row (predeterminado)Los elementos se organizan en fila, de izquierda a derecha.
row-reverseIgual que row, pero invierte el orden.
columnLos elementos se organizan en columna, de arriba hacia abajo.
column-reverseIgual que column, pero invierte el orden.

Ejemplo con flex-direction: column;:

.contenedor {
  display: flex;
  flex-direction: column;
}

Aquí puedes verlo con más detalle:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Al cambiar a flex-direction: column;, el eje principal se vuelve vertical en lugar de horizontal.

¿Y qué pasa si usamos column-reverse?

Los elementos seguirán en columna, pero el orden será invertido:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Prueba con row-reverse para ver cómo afecta la disposición horizontal:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Resumen

  • display: flex; convierte un elemento en un contenedor flex, organizando sus hijos en fila por defecto.
  • display: inline-flex; hace lo mismo, pero el contenedor ocupa solo el espacio necesario.
  • flex-direction permite cambiar la dirección en la que se organizan los elementos flexibles.
    • row: Fila normal (izquierda a derecha).
    • row-reverse: Fila en orden inverso.
    • column: Columna normal (de arriba hacia abajo).
    • column-reverse: Columna en orden inverso.
NavegaciónTeoría

Completado

0 / 10