CSS Academy · Lección

Display Flex y Flex Direction

Active flexbox en un contenedor y controle la dirección del eje principal con flex-direction.

Display Flex y Flex Direction es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

Activación de Flexbox

Flexbox se activa estableciendo display: flex en un elemento contenedor (el contenedor flex). Sus hijos directos se convierten automáticamente en elementos flex.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Flex en línea

display: inline-flex crea un contenedor flex que fluye en línea (como inline-block) en lugar de hacerlo como un bloque. El comportamiento interno de Flexbox es idéntico.

<p>Status: <span class="badge">🔥 Trending</span></p>

El eje principal y el eje transversal

Flexbox tiene dos ejes:

Eje principal: la dirección principal en la que se distribuyen los elementos
Eje transversal: es perpendicular al eje principal

Todas las propiedades de flex hacen referencia a estos ejes, no a direcciones fijas.

flex-direction: row (Predeterminado)

La dirección predeterminada es row: los elementos se colocan de izquierda a derecha a lo largo del eje principal horizontal.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column apila los elementos verticalmente. El eje principal pasa a ser vertical y el eje transversal, horizontal.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse invierte la dirección horizontal: los elementos se colocan de derecha a izquierda. El inicio del eje principal queda a la derecha.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse apila los elementos de abajo arriba. El último elemento aparece en la parte superior.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction afecta a todas las propiedades de flex

Al cambiar flex-direction, justify-content también cambia de dirección. Si la dirección es column, justify-content alinea los elementos en el eje vertical, no en el horizontal.

Diseño horizontal sencillo

El caso de uso más sencillo de Flexbox: centrar los elementos de una navegación:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Diseño vertical sencillo

Centrar vertical y horizontalmente el contenido de una tarjeta:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

Abreviatura flex-flow

flex-flow es la abreviatura de flex-direction y flex-wrap:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Comprobación rápida

Cuando se establece flex-direction: column, ¿qué eje controla justify-content?

Resumen

Establezca display: flex en un contenedor para crear un contexto flex para sus hijos. flex-direction establece la dirección del eje principal: row (horizontal) o column (vertical). Todas las propiedades de alineación de flex son relativas a estos ejes, no a direcciones fijas de izquierda, derecha, arriba o abajo.

Preguntas frecuentes

¿La lección «Display Flex y Flex Direction» es gratis?

Sí — el texto completo de «Display Flex y Flex Direction» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Display Flex y Flex Direction»?

Active flexbox en un contenedor y controle la dirección del eje principal con flex-direction. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Display Flex y Flex Direction»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a CSS Academy