Flexbox

Una dimensión

Flexbox distribuye elementos en una línea: o en fila, o en columna. Ese es el criterio para elegirlo, y lo veremos enfrentado a Grid en la semana 4.

En la UD1 dejaste el menú así:

<nav aria-label="Navegación principal">
    <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="productos.html">Productos</a></li>
    </ul>
</nav>

Con dos declaraciones deja de ser una lista vertical:

nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

display: flex cambia la distribución; gap crea únicamente el espacio entre enlaces.

Fíjate en algo: el HTML no se ha tocado. Sigue siendo una lista de enlaces, que es lo que es. Solo ha cambiado cómo se dibuja.

Los dos ejes

1. Eje principal · horizontal
2. Eje transversal · vertical

Todo Flexbox tiene un eje principal, que es por donde se colocan los elementos, y un eje transversal, el perpendicular. Cuál es cuál lo decide flex-direction:

flex-direction: row;     /* por defecto: principal horizontal */
flex-direction: column;  /* principal vertical */

Las cinco propiedades del contenedor

.barra {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

Valores útiles de justify-content: flex-start, center, flex-end, space-between —los extremos pegados a los bordes y el hueco repartido en medio— y space-around.

De align-items: stretch (por defecto, todos igual de altos), center, flex-start, flex-end, baseline.

gap

La separación entre elementos de un contenedor Flexbox o Grid. Sustituye a los márgenes y evita su problema clásico: no deja un margen sobrante en el último elemento, y no sufre el colapso de márgenes.

En los elementos hijos

.logo    { flex: 0 0 auto; }   /* no crece, no se encoge, mide lo que mida */
.buscador{ flex: 1; }          /* se queda con todo el espacio sobrante */

flex resume tres propiedades: cuánto puede crecer, cuánto puede encogerse y cuál es su tamaño de partida. flex: 1 es el atajo que más vas a usar, y significa «reparte el espacio que sobre entre los elementos que lo tengan».

margin-left: auto en un hijo también tiene un efecto muy útil: empuja ese elemento y todos los siguientes hasta el final del eje. Es la forma limpia de separar un grupo del resto en una barra.

Tarea 8 · La navegación de tu sitio

Transforma la cabecera de tus cuatro páginas:

1. La navegación en fila, con separación mediante gap y sin viñetas.
2. El nombre del sitio a un lado y el menú al otro, en la misma línea.
3. Los dos bloques alineados verticalmente entre sí.
4. flex-wrap para que el menú no desborde cuando falte espacio.
5. Comprueba a 360 px de ancho en DevTools que nada se sale de la pantalla.

Estoy atascado · align-items: center no centra nada

Comprueba dos cosas, en este orden:

1. Que lo has puesto en el contenedor, no en los hijos. justify-content y align-items van siempre en el elemento que tiene display: flex.
2. Cuál es el eje principal. Si has puesto flex-direction: column, para centrar en vertical necesitas justify-content, no align-items.

Y usa el inspector de Flexbox: junto al elemento aparece un icono flex en DevTools que dibuja los ejes y el espacio libre.

Ver respuestas

1 · Sobre el eje principal, sea cual sea su dirección.

2 · Pasa a alinear en horizontal, porque el eje transversal ahora es el horizontal.

3 · Porque separa solo entre elementos, sin dejar un margen sobrante al final, y no sufre el colapso de márgenes.

---