CSS Academy · Lección

Flex Grow, Shrink y Basis

Controle cómo crecen y se reducen los elementos flex y establezca su tamaño base mediante la abreviatura flex.

Flex Grow, Shrink y Basis es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 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.

La abreviatura flex

La abreviatura flex aplicada a los elementos flex establece tres valores: flex-grow, flex-shrink y flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis establece el tamaño inicial de un elemento flex antes de que crezca o se encoja. Sobrescribe width (en la dirección de fila). auto utiliza el ancho o el tamaño del contenido del elemento.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow determina cuánto crece un elemento en relación con sus hermanos cuando hay espacio disponible. Un valor de 0 significa que no crece. Los valores más altos reciben proporcionalmente más espacio.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

Ejemplo de flex-grow

Si un contenedor tiene 300px de espacio libre y dos elementos con flex-grow 1 y 2, el primero recibe 100px adicionales y el segundo, 200px adicionales (proporción 1:2).

flex-shrink

flex-shrink controla cuánto se encoge un elemento cuando no hay suficiente espacio. El valor predeterminado es 1 (todos los elementos se encogen por igual). El valor 0 impide que se encoja.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Valores habituales de la abreviatura flex

Memorice estos patrones habituales:

flex: 1 = crece y se encoge por igual, con una base de 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (rígido)
flex: 0 0 200px = 200px fijos, sin crecimiento ni reducción

flex: 1 — distribución uniforme

Establecer flex: 1 en todos los hijos divide el espacio disponible por igual. La base pasa a ser 0%, por lo que los elementos crecen desde cero y dividen el espacio proporcionalmente.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis frente a width

flex-basis tiene prioridad sobre width en la dirección del eje principal. Si establece ambos, prevalece flex-basis (a menos que flex-basis sea auto, en cuyo caso utiliza width).

Dimensionamiento intrínseco y extrínseco

Cuando flex-basis: 0 (como en flex: 1), el elemento parte de 0 y crece proporcionalmente: se produce una distribución proporcional real. Con flex-basis: auto, los elementos parten del tamaño natural de su contenido y después crecen.

Patrón de la trinidad clásica

Un diseño clásico con una barra lateral fija, un contenido principal flexible y otra barra lateral fija:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width y max-width con flex

Utilice min-width y max-width junto con flex-grow para controlar los límites de crecimiento:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Comprobación rápida

Un elemento tiene flex: 0 0 200px. ¿Qué significa esto?

Resumen

flex-grow distribuye el espacio adicional proporcionalmente. flex-shrink controla cómo se comprimen los elementos. flex-basis establece el tamaño inicial. La abreviatura flex: 1 permite distribuir el espacio por igual. Utilice flex: 0 0 Xpx para elementos de tamaño fijo y flex: 1 para elementos flexibles dentro del mismo contenedor.

Preguntas frecuentes

¿La lección «Flex Grow, Shrink y Basis» es gratis?

Sí — el texto completo de «Flex Grow, Shrink y Basis» 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 «Flex Grow, Shrink y Basis»?

Controle cómo crecen y se reducen los elementos flex y establezca su tamaño base mediante la abreviatura flex. 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 4 de 4.

¿Cuánto tiempo toma la lección «Flex Grow, Shrink y Basis»?

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