Flexbox con Claude Code

Implementando patrones frecuentes de Flexbox rapidamente con Claude Code

Flexbox es la tecnologia estandar para layouts unidimensionales. Conocer los patrones mas usados al solicitar implementaciones a Claude Code hace que las instrucciones sean mas especificas y los resultados mas precisos.

Barra de navegacion

> Crea una barra de navegacion responsiva con Flexbox.
> Logo a la izquierda, menu a la derecha, menu hamburguesa en movil.

/* Navegacion del header */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 60px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

Patrones de centrado

/* Centrado perfecto */
.center-perfect {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Alineacion vertical de texto e iconos */
.inline-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Centrado de bloque con texto multilinea */
.text-center-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

Layout de tarjetas

/* Tarjetas de ancho igual */
.card-row {
  display: flex;
  gap: 1.5rem;
}

.card-row .card {
  flex: 1;
  min-width: 0; /* Prevencion de desbordamiento de texto */
}

/* Tarjeta con footer fijo */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__body {
  flex: 1; /* Ocupa el espacio restante */
}

.card__footer {
  margin-top: auto; /* Siempre posicionado abajo */
}

Layout Holy Grail

/* Layout tradicional de 3 columnas */
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail__body {
  display: flex;
  flex: 1;
}

.holy-grail__main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
}

.holy-grail__sidebar {
  flex: 0 0 250px;
  padding: 1.5rem;
}

.holy-grail__sidebar--left {
  order: -1;
}

Sticky Footer

/* Footer siempre al final de la pagina */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex: 1;
}

/* El footer se posiciona automaticamente abajo */

Disposicion con wrap de tags/chips

/* Lista de tags */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  flex-shrink: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  background: #e5e7eb;
}

Combinacion de campo de entrada y boton

/* Barra de busqueda */
.search-bar {
  display: flex;
}

.search-bar__input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
  padding: 0.5rem 1rem;
  min-width: 0;
}

.search-bar__button {
  flex-shrink: 0;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
}

Cambio responsivo

/* Escritorio: horizontal -> Movil: vertical */
.responsive-flex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (width >= 768px) {
  .responsive-flex {
    flex-direction: row;
  }
}

/* Orden invertido (imagen arriba en movil) */
@media (width < 768px) {
  .feature-section {
    flex-direction: column-reverse;
  }
}

Tips de depuracion de Flexbox

/* Para depuracion: borde en todos los elementos */
.debug-flex * {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

/* Visualizar el tamano de cada item */
.debug-flex > * {
  position: relative;
}

.debug-flex > *::after {
  content: attr(class) " | " attr(style);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 4px;
}

Resumen

El punto clave de Flexbox es distinguir su uso de CSS Grid. Flexbox es adecuado para layouts unidimensionales, mientras que CSS Grid es mejor para layouts bidimensionales. Con solo indicar a Claude Code “alinea horizontalmente con Flexbox”, genera implementaciones que incluyen configuracion de gap y consideracion de min-width: 0. Tambien se recomienda combinar con variables CSS para aprovechar los design tokens. Para los detalles de la especificacion de Flexbox, consulte CSS Flexible Box Layout Module.