Patrones abreviados de flex
Domine la forma abreviada de flex y comprenda valores habituales como flex: 1, flex: none y flex: auto.
Patrones abreviados de flex es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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.
Repaso de la abreviatura flex
La abreviatura flex establece flex-grow, flex-shrink y flex-basis en una sola declaración. Comprender las variantes de esta abreviatura es esencial para crear diseños reales.
flex: 1
flex: 1 equivale a flex: 1 1 0%. Los elementos parten de una base de tamaño cero y crecen por igual para ocupar el espacio disponible. Esta es la abreviatura más habitual para crear columnas del mismo tamaño.
<div class="equal-cols">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
flex: auto
flex: auto = flex: 1 1 auto. Los elementos parten de su tamaño de contenido natural y después crecen o se reducen proporcionalmente. El contenido más ancho obtiene más espacio al crecer.
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Contact</a>
</div>
flex: none
flex: none = flex: 0 0 auto. El elemento es rígido: no crece ni se reduce. Su tamaño viene determinado por el ancho de su contenido natural o por un ancho o alto explícitos.
<div class="row">
<div class="logo">Logo</div>
<div>Flexible content</div>
</div>
flex: 0 0 Xpx
Un elemento de tamaño fijo que no es flexible. Esta es la forma más explícita de crear paneles laterales con anchos exactos:
<div class="layout">
<div class="sidebar-left">Left</div>
<div class="main-content">Main</div>
<div class="sidebar-right">Right</div>
</div>
flex: 1 frente a flex: 1 1 auto
La diferencia principal es la siguiente: con flex: 1 (base de 0 %), todos los elementos parten de 0 y crecen proporcionalmente. Con flex: 1 1 auto, los elementos parten de su tamaño de contenido natural y después crecen. Esto afecta a la distribución del espacio restante.
Proporción flex: 2
Utilice valores de flex-grow no iguales para distribuir el espacio proporcionalmente:
<div class="split">
<div class="main">Main (2/3)</div>
<div class="side">Side (1/3)</div>
</div>
Combinar elementos fijos y flexibles
El patrón más habitual en proyectos reales: barra lateral fija y contenido principal flexible:
<div class="layout">
<div class="sidebar">Sidebar 280px</div>
<div class="content">Flexible content</div>
</div>
Truco de Flexbox con min-width: 0
Los elementos flex tienen un valor predeterminado de min-width: auto. Esto puede impedir que se reduzcan por debajo del tamaño de su contenido. Establezca min-width: 0 en los elementos que deban reducirse libremente, como los contenedores de texto con truncamiento.
<div class="row">
<div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>
Patrón de cuadrícula de tarjetas
Cuadrícula responsive de tarjetas con un tamaño flexible, pero limitado:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
Depurar la abreviatura flex
Utilice las DevTools del navegador para inspeccionar los valores calculados de flex-grow, flex-shrink y flex-basis. La superposición del inspector de Flexbox también muestra visualmente el espacio libre y los tamaños de los elementos.
Comprobación rápida
¿En qué se convierte flex: auto?
Resumen
Memorice las abreviaturas flex principales: flex: 1 (columnas iguales desde cero), flex: auto (crecer desde el tamaño natural), flex: none (rígido), flex: 0 0 Xpx (tamaño fijo). Utilice min-width: 0 en los elementos flex secundarios que contengan texto con truncamiento. Combine elementos fijos y flexibles para crear diseños clásicos con barra lateral.
Preguntas frecuentes
¿La lección «Patrones abreviados de flex» es gratis?
Sí — el texto completo de «Patrones abreviados de flex» 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 «Patrones abreviados de flex»?
Domine la forma abreviada de flex y comprenda valores habituales como flex: 1, flex: none y flex: auto. 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 3 de 4.
¿Cuánto tiempo toma la lección «Patrones abreviados de flex»?
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
- Anulación de la alineación de flex items con align-self
- Propiedad order y reordenación visual
- Patrones abreviados de flex
- Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia