Flexbox: diseño en una sola línea

Al finalizar este tema

Comprenderá las propiedades clave de Flexbox y podrá alinear elementos horizontal y verticalmente, así como controlar los espacios con libertad.

Con display: flex en una sola línea

.container {
  display: flex;
}

Con solo esta línea, los elementos hijos se alinean horizontalmente. Es una revolución en comparación con los tiempos en que sufríamos con float o inline-block.

Eje principal y eje transversal

Flexbox tiene dos ejes:

Eje principal (main axis): La dirección en la que se posicionan los elementos. El valor predeterminado es horizontal (row). Eje transversal (cross axis): La dirección perpendicular al eje principal. El valor predeterminado es vertical.

.container {
  display: flex;
  flex-direction: row;    /* valor predeterminado: disposición horizontal */
  flex-direction: column; /* disposición vertical */
}

Al cambiar flex-direction a column, el eje principal se vuelve vertical.

Alineación del eje principal: justify-content

Determina cómo se distribuyen los elementos a lo largo del eje principal:

.container {
  display: flex;
  justify-content: flex-start;    /* alineación al inicio (valor predeterminado) */
  justify-content: center;        /* alineación al centro */
  justify-content: flex-end;      /* alineación al final */
  justify-content: space-between; /* elementos pegados a los extremos con espacio uniforme entre ellos */
  justify-content: space-around;  /* espacio uniforme alrededor de cada elemento */
}

space-between se utiliza con frecuencia para colocar el logotipo y el menú en los extremos de la barra de navegación.

Alineación en el eje transversal: align-items

Determina cómo se posicionan los elementos en el eje transversal:

.container {
  display: flex;
  align-items: stretch;    /* ajustar a la altura del contenedor (valor predeterminado) */
  align-items: center;     /* centrado vertical */
  align-items: flex-start; /* arriba */
  align-items: flex-end;   /* abajo */
}

Alineación centrada (horizontal y vertical):

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Estas tres líneas son suficientes para un centrado perfecto.

gap — Espaciado

.container {
  display: flex;
  gap: 16px;
}

Especifica el espacio entre los elementos. Antes se ajustaba manualmente con margin, pero con gap se puede resolver en una sola línea. No se genera un margen innecesario después del último elemento.

flex-wrap — Salto de línea

.container {
  display: flex;
  flex-wrap: wrap;
}

Por defecto, los elementos flex se ajustan en una sola línea. Si no hay suficiente espacio, los elementos se comprimen. Al usar flex-wrap: wrap, los elementos pasan a la siguiente línea cuando falta espacio. Esto es útil al crear cuadrículas de tarjetas.

flex: 1 — Ocupar el espacio restante

.sidebar { width: 250px; }
.content { flex: 1; }

flex: 1 ocupa todo el espacio restante. Se utiliza para crear un área de contenido flexible junto a una barra lateral de ancho fijo.

Conceptos clave

Con solo display: flex, los elementos hijos se disponen horizontalmente. justify-content es la alineación en el eje principal y align-items es la alineación en el eje transversal. Se puede usar gap para el espaciado y flex: 1 para rellenar el espacio restante.