CSS Flexbox: Arquitectura del Layout Flexible

<!-- Contenedor que luego se convertirá en flex -->
<div class="contenedor">
  <!-- Cada elemento interno será un flex item -->
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
  <div class="item">Elemento 3</div>
</div>

/* Contenedor padre que define el contexto Flexbox */
.contenedor {
  /* Activa el sistema Flexbox */
  display: flex;
}

/* Solo los hijos directos de .contenedor se convierten en flex items */
/* Los elementos anidados más profundo no heredan el comportamiento flex */

<!-- Navegación que será distribuida con Flexbox -->
<nav class="menu">
  <a href="#">Inicio</a>
  <a href="#">Servicios</a>
  <a href="#">Contacto</a>
</nav>

/* Contenedor que iniciará el contexto Flexbox */
.menu {
  /* Activa el sistema Flexbox */
  display: flex;
}

/* A partir de este momento, los hijos directos se convierten en flex items */
/* Sin display: flex, ninguna propiedad flex tiene efecto */

<!-- Los elementos se distribuyen según el eje principal -->
<div class="contenedor">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

/* Contenedor que organiza el flujo de los elementos */
.contenedor {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Define la dirección del eje principal */
  /* row: fila (por defecto) */
  /* column: columna */
  /* row-reverse / column-reverse: invierten el orden visual */
  flex-direction: row;
}

<!-- Galería flexible que puede romper en varias filas -->
<div class="galeria">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

/* Contenedor tipo galería */
.galeria {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Controla si los ítems pueden pasar a otra línea */
  /* nowrap: fuerza una sola línea (valor por defecto) */
  /* wrap: permite múltiples líneas */
  /* wrap-reverse: invierte el orden de las líneas */
  flex-wrap: wrap;
}

<!-- Contenedor con dirección y wrap definidos -->
<section class="listado">
  <article class="card">A</article>
  <article class="card">B</article>
  <article class="card">C</article>
</section>

/* Contenedor que combina dirección y wrap */
.listado {
  /* Activa el sistema Flexbox */
  display: flex;

  /* flex-flow = flex-direction + flex-wrap */
  /* row wrap: fila con múltiples líneas */
  /* row nowrap: fila en una sola línea */
  /* column wrap: columna con múltiples bloques */
  /* column nowrap: columna sin saltos */
  flex-flow: row wrap;
}

<!-- Elementos alineados en el eje principal -->
<div class="barra">
  <div>Uno</div>
  <div>Dos</div>
  <div>Tres</div>
</div>

/* Contenedor tipo barra (navbar, header, footer, etc.) */
.barra {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Distribuye los ítems sobre el eje principal */
  /* flex-start: todos al inicio (valor por defecto) */
  /* flex-end: todos al final */
  /* center: centrados */
  /* space-between: extremos a los bordes */
  /* space-around: espacio alrededor de cada ítem */
  /* space-evenly: espacio idéntico entre ítems y bordes */
  justify-content: space-between;
}

<!-- Contenedor con elementos de distinta altura -->
<div class="contenedor">
  <div class="item alto">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

/* Contenedor Flexbox */
.contenedor {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Alineación sobre el eje transversal */
  /* stretch: estira los ítems (valor por defecto) */
  /* flex-start: alinea al inicio del eje transversal */
  /* center: centra los ítems */
  /* flex-end: alinea al final del eje transversal */
  /* baseline: alinea según la línea base del texto */
  align-items: center;
}

<!-- Contenedor con múltiples filas de elementos -->
<div class="muro">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

/* Contenedor con múltiples filas de elementos */
.muro {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Permite que los ítems generen más de una línea */
  flex-wrap: wrap;

  /* Altura necesaria para que exista espacio transversal */
  height: 400px;

  /* Alinea el bloque completo de filas en el eje transversal */
  /* Solo tiene efecto si hay más de una línea */
  align-content: center;
}

<!-- Tarjetas separadas sin usar margin -->
<div class="tarjetas">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

/* Contenedor que organiza tarjetas con Flexbox */
.tarjetas {
  /* Activa el sistema Flexbox */
  display: flex;

  /* Permite que las tarjetas pasen a una nueva fila si no entran */
  flex-wrap: wrap;

  /* Espacio uniforme entre filas y columnas */
  /* No agrega espacio en los bordes externos */
  gap: 24px;
}

<!-- Ítems flex con comportamiento individual -->
<div class="layout">
  <div class="item destacado">Principal</div>
  <div class="item">Secundario</div>
  <div class="item">Extra</div>
</div>

/* Ítem destacado que se mostrará primero */
.destacado {
  /* Un valor menor aparece antes que los demás */
  order: -1;
}

/* Ítem secundario que se mostrará después */
.secundario {
  /* Valores mayores se colocan más al final */
  order: 2;
}