Frontend

CSS Flexbox: La guía para quien tiene prisa

Aprende los pilares de CSS Flexbox en tiempo récord. Una guía enfocada en la sintaxis esencial y en los alineamientos que realmente usas en el día a día, sin rodeos y directo al código.

Equipe Blueprintblog23 mar 20266 min

CSS Flexbox: La guía para quien tiene prisa

🎯 Conceptos Clave

Contenedor (Padre): Elemento que recibe display: flex;. Gestiona el diseño de sus hijos.
Ítem (Hijo): Elementos directamente dentro del contenedor flex. Son organizados por el contenedor.
Eje Principal: Dirección predeterminada de los ítems (fila por defecto, pero puede ser columna). Controlado por flex-direction.
Eje Cruzado: Perpendicular al eje principal. Controlado por align-items y align-content.
Flexibilidad: Capacidad de los ítems para crecer (flex-grow), encogerse (flex-shrink) o tener un tamaño base (flex-basis).

Um diagrama que ilustra um container flex com seus itens. O diagrama deve claramente rotular o 'Container (Pai)', os 'Itens (Filhos)', o 'Eixo Principal' (com setas indicando a direção, e notações para `row` e `column`), e o 'Eixo Cruzado' (também com setas). Poderia mostrar um exemplo simples de itens alinhados.

📝 Sintaxis Esencial

css

/* No Container (Pai) */
.flex-container {
  display: flex; /* Define como container flex */

  /* Direção dos itens */
  flex-direction: row; /* padrão: linha (horizontal) */
  /* flex-direction: column; linha vertical */

  /* Quebra de linha */
  flex-wrap: wrap; /* permite quebrar linha */
  /* flex-wrap: nowrap; não quebra (padrão) */

  /* Atalho para flex-direction e flex-wrap */
  flex-flow: row wrap;

  /* Alinhamento no Eixo Principal */
  justify-content: flex-start; /* início (padrão) */
  /* justify-content: flex-end; fim */
  /* justify-content: center; centro */
  /* justify-content: space-between; espaço entre */
  /* justify-content: space-around; espaço ao redor */
  /* justify-content: space-evenly; espaço igualmente */

  /* Alinhamento no Eixo Cruzado (single line) */
  align-items: stretch; /* estica (padrão) */
  /* align-items: flex-start; início */
  /* align-items: flex-end; fim */
  /* align-items: center; centro */
  /* align-items: baseline; alinha pela linha de base */

  /* Alinhamento no Eixo Cruzado (multiple lines) */
  align-content: stretch; /* estica (padrão) */
  /* align-content: flex-start; */
  /* align-content: flex-end; */
  /* align-content: center; */
  /* align-content: space-between; */
  /* align-content: space-around; */
}

/* Nos Itens (Filhos) */
.flex-item {
  /* Crescimento do item (fator) */
  flex-grow: 1; /* ocupa espaço disponível */
  /* flex-grow: 0; não cresce (padrão) */

  /* Encolhimento do item (fator) */
  flex-shrink: 1; /* encolhe se necessário (padrão) */
  /* flex-shrink: 0; não encolhe */

  /* Tamanho base do item antes de crescer/encolher */
  flex-basis: auto; /* largura/altura do conteúdo (padrão) */
  /* flex-basis: 100px; */

  /* Atalho para flex-grow, flex-shrink e flex-basis */
  flex: 0 1 auto; /* não cresce, encolhe, auto-base */
  /* flex: 1; (igual a flex: 1 1 0%) */
  /* flex: auto; (igual a flex: 1 1 auto) */
  /* flex: none; (igual a flex: 0 0 auto) */

  /* Ordem individual dos itens */
  order: 0; /* padrão */
  /* order: 1; */

  /* Alinhamento individual no Eixo Cruzado */
  align-self: auto; /* herda do container (padrão) */
  /* align-self: flex-start; */
  /* align-self: flex-end; */
  /* align-self: center; */
}

⚡ Comandos Rápidos

display: flex;: Convierte el elemento en un contenedor flex.
justify-content: center;: Centra los ítems en el eje principal.
align-items: center;: Centra los ítems en el eje cruzado (en una sola línea).
flex-direction: column;: Cambia la dirección de los ítems a vertical.
flex-wrap: wrap;: Permite que los ítems salten a la siguiente línea/columna.
flex: 1;: El ítem crece, se encoge y tiene una base de 0 (ideal para llenar espacio).

🔧 Casos de Uso

Caso básico: Alineación Horizontal y Vertical Simple
Caso intermedio: Diseño de Navegación Responsiva
Caso avanzado: Sistema de Cuadrícula Simple (3 columnas, flexibles)

🚨 Errores Comunes

display: flex; solo funciona en el padre directo: Las propiedades flexbox aplicadas al contenedor afectan solo a sus hijos directos.
Altura del flex-container: Para que align-items: center; funcione verticalmente, el contenedor necesita tener una altura definida (p. ej., height: 100vh; o un valor fijo).
margin: auto; en ítems flex: Usar margin: auto; en un ítem flex puede ser potente para empujar otros ítems o centrar un ítem específico dentro del eje principal/cruzado.
width y height vs flex-basis: flex-basis generalmente anula width (en el eje principal) y height (en el eje cruzado) en ítems flex. Usa flex-basis para definir el tamaño inicial preferido.
flex-wrap: nowrap; con overflow: Si no usas flex-wrap: wrap;, los ítems intentarán permanecer en una sola línea y pueden desbordar el contenedor.