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).

📝 Sintaxis Esencial

/* 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

1. Caso básico: Alineación Horizontal y Vertical Simple

   HTMLCopiar

   <div class="container">  <div class="item">Conteúdo</div></div>

   CSSCopiar

   .container {  display: flex;  justify-content: center; /* Centraliza horizontalmente */  align-items: center;     /* Centraliza verticalmente */  height: 100vh; /* Exemplo para ver o efeito */}

2. Caso intermedio: Diseño de Navegación Responsiva

   HTMLCopiar

   <nav class="navbar">  <a href="#">Home</a>  <a href="#">Sobre</a>  <a href="#">Contato</a></nav>

   CSSCopiar

   .navbar {  display: flex;  justify-content: space-around; /* Distribui links igualmente */  flex-wrap: wrap; /* Permite quebrar linha em telas menores */  background-color: #eee;  padding: 10px;}.navbar a {  padding: 8px 15px;  text-decoration: none;  color: #333;}

3. Caso avanzado: Sistema de Cuadrícula Simple (3 columnas, flexibles)

   HTMLCopiar

   <div class="grid-container">  <div class="col">Coluna 1</div>  <div class="col">Coluna 2</div>  <div class="col">Coluna 3</div></div>

   CSSCopiar

   .grid-container {  display: flex;  flex-wrap: wrap; /* Permite quebrar colunas */  gap: 20px;       /* Espaço entre as colunas */}.col {  flex: 1 1 calc(33.333% - 20px); /* 3 colunas, encolhem, base de 1/3 menos o gap */  min-width: 250px; /* Colunas não ficam muito pequenas */  background-color: lightblue;  padding: 15px;  text-align: center;}/* Para telas muito pequenas, uma coluna por linha */@media (max-width: 600px) {  .col {    flex: 1 1 100%;  }}

🚨 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.