Estas tres propiedades en elementos flex controlan cómo comparten espacio a lo largo del eje principal. La abreviatura flex las combina.
{ : ; }
flex-basis — el tamaño ideal/inicial del elemento en el eje principal (como width para una fila). auto usa el tamaño del contenido.flex-grow — si hay espacio extra, qué tan ávidamente se expande este elemento. 0 = no crecer; números más altos crecen proporcionalmente.flex-shrink — si no hay espacio suficiente, qué tan dispuesto se encoge este elemento. 0 = nunca encogerse (puede causar desbordamiento); predeterminado 1 = encogerse según sea necesario..a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
El espacio extra se divide en la proporción de los valores de crecimiento, no en tamaños absolutos.
.item { flex: 1; } /* = 1 1 0 → all items share space EQUALLY (equal widths) */
.item { flex: auto; } /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; } /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
flex: 1 en cada elemento crea columnas iguales; flex: 0 0 250px crea un panel rígido de ancho fijo junto a uno flexible.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Estas propiedades son cómo controlas el tamaño proporcional en diseños flex — columnas iguales (flex: 1), paneles fijos más fluidos (flex: 0 0 X + flex: 1) y prevención de encogimiento no deseado (flex-shrink: 0).
Comprender basis/grow/shrink convierte Flexbox de "los elementos simplemente están ahí" en control preciso y responsivo.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar