Un menú en fila, una tarjeta con la imagen a la izquierda y el texto a la derecha, un botón centrado en su caja: casi todo lo que colocas en una dirección (una fila o una columna) se resuelve con Flexbox.

Flexbox se activa en el contenedor. Sus hijos directos pasan a ser elementos flexibles y se colocan en línea:

<nav>
  <ul class="menu">
    <li><a href="#trabajos">Trabajos</a></li>
    <li><a href="#sobre-mi">Sobre mí</a></li>
    <li><a href="#contacto">Contacto</a></li>
  </ul>
</nav>

.menu {
  display: flex;        /* los <li> se colocan en fila */
  gap: 1.5rem;          /* espacio entre ellos */
  list-style: none;
  padding: 0;
}

Flexbox trabaja con dos ejes:

• Eje principal: la dirección en la que se colocan los elementos. Por defecto, horizontal (flex-direction: row).
• Eje transversal: el perpendicular.

flex-direction: row                     flex-direction: column
eje principal →                         eje principal ↓
┌───┐ ┌───┐ ┌───┐                        ┌───┐
│ A │ │ B │ │ C │   ↕ eje transversal    │ A │   ↔ eje transversal
└───┘ └───┘ └───┘                        ├───┤
                                         │ B │
                                         └───┘

Un clásico: centrar algo en su caja, en horizontal y vertical.

.portada {
  display: flex;
  justify-content: center;   /* centro en el eje principal */
  align-items: center;       /* centro en el eje transversal */
  min-height: 60vh;
}

Otro clásico: logo a la izquierda y menú a la derecha.

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

En los hijos se decide cómo crecen o encogen:

.tarjeta {
  display: flex;
  gap: 1rem;
}
.tarjeta img {
  flex: 0 0 120px;   /* no crece, no encoge, base de 120px */
}
.tarjeta .texto {
  flex: 1;           /* ocupa todo el espacio que sobra */
}

flex: 1 es la forma corta más usada: "reparte el espacio sobrante a partes iguales entre los que tengan flex: 1".

💡 Consejo. Las DevTools de Chrome y Firefox muestran un distintivo flex junto al contenedor en la pestaña Elementos. Al pulsarlo dibujan los ejes y el espacio de cada hijo. Úsalo siempre que algo no se coloque donde esperas.

• Poner display: flex en el hijo en lugar de en el contenedor.
• Esperar que justify-content centre en vertical en una fila: en fila, la vertical es el eje transversal (align-items).
• Usar márgenes en cada elemento en lugar de gap.