Introducción Flexbox

La alineación en CSS dejó de ser un dolor de cabeza con Flexbox. Aquí verás cómo activar el modelo flex, cuándo usarlo y qué propiedades aplican para centrar y distribuir elementos sin trucos. Todo con ejemplos claros y concisos, tal como se trabajó en el código.

¿Qué problema resuelve flexbox y cómo activarlo?

Flexbox simplifica la tarea de posicionar contenido dentro de contenedores. Antes, centrar o reacomodar elementos era complejo y frágil. Con un solo cambio de display, el contenedor adopta el modelo de layout flexible, y puedes alinear y distribuir sus elementos con control total.

• Define un contenedor principal (container).
• Cambia su display a flex para activar Flexbox.
• Los elementos internos se vuelven items flex y responden al eje principal y transversal.

Ejemplo aplicado al contenedor principal con estilos base:

.container {
  display: flex; /* Activa el modelo de Flexbox */
  background: #f0f0f0; /* background gris claro */
  padding: 10px; /* espacio interno */
  margin-bottom: 20px; /* separación entre contenedores */
  min-height: 100px; /* altura mínima del contenedor */
}

Idea clave: al pasar de display: block a display: flex, el layout cambia y puedes usar propiedades flex para alinear y distribuir con precisión.

¿Cómo se estiliza el contenedor y los items con CSS?

Se distinguen el contenedor y los elementos internos para visualizar mejor el comportamiento. Así se entiende dónde actúa cada propiedad.

• Los elementos internos son items (por ejemplo, divs con números).
• Se usa un background visible y separación entre elementos.
• El texto se centra con text-align y se mejora la legibilidad con padding.

Ejemplo para los items:

.item {
  background: #3498db; /* azul para diferenciar */
  color: white; /* contraste del texto */
  margin: 5px; /* separación entre items */
  text-align: center; /* centra el texto en el item */
  padding: 20px; /* espacio interno del item */
}

Habilidades que desarrollas: reconocer el rol del contenedor frente a los items, aplicar padding, margin, min-height y colores para inspeccionar y depurar el layout.

¿Cómo funcionan flex-direction, justify-content y align-items?

Con display: flex activo, el siguiente paso es controlar la dirección, la distribución y la alineación. Estas tres propiedades cubren la mayoría de casos cotidianos de alineación en CSS.

¿Qué hace flex-direction en el eje principal?

Define la dirección del eje principal del contenedor flex.

.column {
  display: flex;
  flex-direction: column; /* apila los items en columna */
}

• Cambia de fila (por defecto) a columna con column.
• Útil cuando quieres que los items ocupen el 100% a lo largo del eje vertical.
• Permite pensar en eje principal (horizontal o vertical) y eje transversal.

¿Cómo centrar con justify-content en el eje principal?

Controla la alineación y distribución a lo largo del eje principal del contenedor.

.center {
  display: flex;
  justify-content: center; /* centra los items en el eje principal */
}

• Centra horizontalmente si el eje principal es una fila.
• Centra verticalmente si usas flex-direction: column.
• Palabras clave frecuentes: flex-start, center, flex-end, space-between, space-around.

¿Cómo alinear con align-items en el eje transversal?

Alinea los items en el eje transversal del contenedor.

.align {
  display: flex;
  align-items: center; /* centra los items en el eje transversal */
}

• Centra de arriba a abajo cuando el eje principal es horizontal.
• Responde al tamaño del contenedor padre (por ejemplo, min-height: 100px).
• Antes era complejo; ahora basta una línea con Flexbox.

Conceptos que dominas al practicar: - Contenedor vs items: dónde aplicar cada propiedad. - Eje principal y eje transversal: base mental de Flexbox. - Centrado real con justify-content y align-items sin hacks.

¿Te quedó alguna duda al aplicar flex-direction, justify-content o align-items? Comparte tu caso y lo resolvemos juntos en los comentarios.