Curso de CSS / fundamentos de Flexbox: contenedores, elementos y ejes

Flexbox organiza los elementos hijos directos de un contenedor a lo largo de un eje principal y distribuye el espacio a lo largo de ese eje. flex-direction elige la dirección del eje principal, mientras que el eje transversal corre perpendicular a él; row no siempre significa horizontal.

Elige un contenedor Flexbox y sus elementos

Flexbox se adapta a relaciones unidimensionales como elementos de navegación, un campo de búsqueda junto a un botón, o un ícono junto a una descripción. Espaciar estos con espacios repetidos o elementos posicionados independientemente es frágil a medida que el contenido y el ancho disponible cambian. Flexbox distribuye el espacio disponible de un contenedor entre sus hijos directos.

Si necesitas una cuadrícula que alinee filas y columnas de manera consistente al mismo tiempo, revisa Grid. Flexbox también puede dividirse en varias líneas, pero cada línea distribuye el espacio por separado, por lo que las columnas de la primera línea no siempre coinciden con las columnas de la segunda línea. Se puede usar un área grande de la página junto como una cuadrícula, y una colección de botones dentro de ella puede usarse junto como un Flexbox. Para alinear varias filas y columnas juntas, compara Fundamentos de CSS Grid: pistas, líneas y colocación de elementos, que crea filas y columnas juntas.

.menu {
  display: flex;
  gap: 12px;
}

Esta declaración no es un comando para ordenar .menu en sí mismo dentro de su contenedor principal. Distribuye los hijos directos de .menu. Por ejemplo, si tienes dos divs dentro de un .menu y dos spans dentro del primer div, los elementos flex son esos dos divs. Si quieres distribuir los span horizontalmente, también debes especificar un display: flex separado en ese div.

Identifica los ejes principal y transversal

El eje principal es la dirección en la que se listan los ítems Flex, y el eje transversal es la dirección perpendicular al eje principal. En lugar de memorizar qué propiedad controla el ancho o alto, necesitas entender qué eje lo controla para poder alinearlo con precisión incluso cuando lo cambias a una columna.

Las instrucciones en esta tabla suponen writing-mode: horizontal-tb y direction: ltr. En escritura de derecha a izquierda o vertical, las direcciones físicas cambian. row sigue la dirección en línea, por lo que no siempre comienza a la izquierda. Para más detalles, consulte MDN: conceptos básicos de Flexbox, ejes y dirección de escritura .

Comprende el comportamiento inicial de Flexbox

Si no se especifica un valor separado, flex-direction es row y flex-wrap es nowrap. Los elementos se agrupan al principio del eje principal y no se expanden automáticamente a lo largo del eje principal para llenar el espacio adicional. Pueden encogerse si hay espacio insuficiente, pero si no pueden encogerse lo suficiente debido al tamaño mínimo del contenido o a las restricciones especificadas, pueden desbordarse fuera del contenedor. El control detallado de la alineación, los saltos de línea y el tamaño de los elementos se continuará en Flexbox Alineación, salto de línea, espacio, crecimiento y encogimiento.

En los ejes transversales, stretch es el comportamiento de alineación predeterminado. Los elementos con altura automática en una fila normalmente llenan la misma altura de la fila. Por eso, las tarjetas de descripción corta aparecen con la misma altura que las tarjetas de descripción larga. No supongas que los elementos que ya tienen una altura clara o márgenes automáticos se extenderán automáticamente. En column y con la escritura horizontal de este ejemplo, el eje transversal es horizontal, por lo que la anchura parece aumentar.

El cambio de tamaño inicial de un elemento puede entenderse como flex: 0 1 auto. 0 significa no ampliar tomando el espacio restante, 1 significa participar en la reducción en el espacio insuficiente, y auto significa usar la especificación de tamaño y el contenido del eje principal correspondiente como base. En esta etapa, primero se verifica la dirección de colocación y la operación básica, y la práctica de ajustar la proporción y los saltos de línea se trata en detalle en la lección de alineación y ajuste de tamaño.

Compara el flujo normal y las direcciones de Flexbox

Guarda el código a continuación como un archivo UTF-8 flex-direction.html y ábrelo en tu navegador. No se requieren bibliotecas adicionales. Todos los enlaces están escritos en el orden de primero, segundo, tercero, y solo el CSS es diferente. La sección de diseño general especifica los enlaces como bloques y los muestra línea por línea.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-direction.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.demo { border: 2px dashed #789; padding: 12px; margin-bottom: 20px; }
 .demo > a, .nested > div { padding: 12px; background: #dceefa; }
 .normal > a { display: block; margin-bottom: 8px; }
 .row, .column, .reverse, .nested { display: flex; gap: 12px; }
 .column { flex-direction: column; }
 .reverse { flex-direction: row-reverse; }
 .nested > div { flex: 1; min-width: 0; }
 .nested span { display: block; }
 .initial { display: flex; gap: 12px; border: 2px dashed #789; }
 .initial > div { width: 180px; min-width: 0; padding: 12px; background: #e8f5de; }
  </style>
</head>
<body>
<h1>Same HTML order, different placement</h1>
<h2>Normal block flow</h2><div class="demo normal"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row</h2><div class="demo row"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>column</h2><div class="demo column"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row-reverse</h2><div class="demo reverse"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>Direct and nested children</h2><div class="demo nested"><div><span>First line of box A</span><span>Second line of box A</span></div><div>Box B</div></div>
<h2>Initial size and growth</h2><div class="initial"><div>Short description</div><div>Two-line description<br>Second line</div><div>Three-line description<br>Second line<br>Third line</div></div>
<p id="result">This is the link destination. Use the links above to check keyboard navigation order.</p>
</body>
</html>

1. En la sección de fila, asegúrate de que los tres elementos estén en la misma línea. Solo agrega flex-direction: column a .row para cambiarlo a vertical. Después de la confirmación, elimina la declaración y vuelve a la fila original.
2. Observa cómo los enlaces en la sección de columna se ensanchan horizontalmente. Agregar align-items: flex-start a .column acerca el enlace al ancho del contenido. Esto se debe a que el eje cruzado de la columna es horizontal. Después de comparar, elimina la declaración agregada.
3. En la sección row-reverse, el enlace First aparece a la derecha, aunque sigue siendo el primero en el HTML. Pulsa Tab y comprueba el orden First → Second → Third. No cambies órdenes de lectura importantes solo con invertir, ya que el orden visual y el orden de navegación con el teclado pueden quedar distintos.
4. En las secciones hijas anidadas, solo los grandes cuadros A y B se colocan uno al lado del otro. Los dos spans en A son verticales. Si añades display: flex a la regla .nested > div, también cambia la distribución interna de esos divs. Elimina la declaración añadida después de verificar.
5. En la última sección, asegúrate de que las tres tarjetas tengan la misma altura y, en pantallas anchas, que cada tarjeta no ocupe todo el ancho restante. Al reducir el tamaño de la pantalla, el ancho de las tarjetas disminuye sin saltos de línea. Si agregas flex-shrink: 0 a .initial > div, no se encogerá, causando desbordamiento horizontal. Elimina la declaración añadida después de verificar.

Diagnostica resultados de distribución inesperados

En las herramientas de desarrollo, selecciona el padre real, no el hijo que deseas ordenar, y verifica el valor aplicado de display. Luego, verifica la flex-direction, width·height·min-width y margin del hijo. Si el flex está cubierto por otra regla o el objetivo de orden está un nivel más abajo, no obtendrás los resultados esperados.

Los saltos de línea son diferentes de cambiar filas y columnas. En una situación donde una línea horizontal se desborda, primero debes decidir si la columna es apropiada y si se necesita flex-wrap para mantener múltiples filas. Si el contenido está oculto en móvil, verifica los tamaños mínimos que impiden reducir las cajas y el orden de lectura antes de ocultarlo con overflow: hidden. Las modificaciones temporales en las herramientas de desarrollador se pueden revertir con un refresco, y si modificaste un archivo, tendrás que restaurar cualquier valor guardado por ti mismo.