EasyCode365EasyCode365

Lección interactiva: CSS Flexbox

Esta lección está enfocada en la práctica.

Ya aprendiste las propiedades básicas de Flexbox. Aquí las cambiarás en pasos pequeños y enfocados, y verás cómo se mueven los flex items. Cada playground de abajo aísla una idea, para que puedas aprenderla por separado antes de combinarlo todo.

Dirección y wrapping

flex-direction define el main axis (fila o columna), y flex-wrap decide si los elementos se quedan en una línea o pasan a nuevas líneas.

flex-direction · flex-wrap

Cambia el eje principal y activa el wrapping. Observa cómo los elementos se reordenan y cambian los saltos de línea.

1
2
3
4
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Alineación en fila

En una fila, justify-content mueve los elementos horizontalmente, mientras que align-items y align-content trabajan verticalmente.

justify-content · align-items · align-content

El contenedor usa flex-direction: row. Observa la alineación horizontal y vertical por separado.

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Alineación en columna

En una columna, los ejes cambian: justify-content trabaja verticalmente, mientras que align-items y align-content trabajan horizontalmente.

justify-content · align-items · align-content

El contenedor usa flex-direction: column. Observa cómo los mismos controles ahora mueven los elementos en ejes cambiados.

1
2
3
.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Espaciado y tamaño de los elementos

gap añade espacio entre los elementos, y el atajo flex controla cómo crece o se encoge cada elemento para repartir el espacio disponible.

gap · Flex del elemento

Cambia el gap y cómo se flexiona cada elemento. Observa el espaciado y cómo los elementos comparten la fila.

1
2
3
.flex-container {
  display: flex;
  gap: 12px;
}

.flex-item {
  flex: 0 0 64px;
}

Júntalo todo

Ahora combina todas las propiedades en un solo playground y lee el CSS completo que genera.

Playground de Flexbox

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 12px;
  background-color: #f1f5f9;
}

.flex-item {
  flex: 0 0 64px;
}