CSS
Explica flex-basis, flex-grow, flex-shrink, tamaños mínimos y propiedades de alineación para controlar cómo crecen y se contraen los ítems.
Flexbox calcula un tamaño base, compara el total con el espacio disponible y distribuye crecimiento o encogimiento.
.item {
flex: 1 1 16rem;
}flex-grow → cómo recibe espacio positivo
flex-shrink → cómo cede espacio negativo
flex-basis → tamaño base antes de distribuir.item {
flex-basis: 20rem;
}Define la base en main axis. auto consulta el main-size property y luego contenido; 0 ignora gran parte de la base de contenido al repartir crecimiento.
.a { flex-grow: 1; }
.b { flex-grow: 2; }Los factores reparten espacio libre proporcionalmente. No significa que B termine exactamente con el doble de tamaño, porque las bases pueden ser distintas.
.item { flex-shrink: 1; }El espacio negativo se reparte considerando shrink factor y flex base size. Items grandes suelen ceder más.
flex: 1;La expansión común se comporta aproximadamente como 1 1 0%, no como 1 1 auto.
Patrones útiles:
.fixed { flex: 0 0 auto; }
.fluid { flex: 1 1 0; }
.card { flex: 1 1 18rem; }En row flex, flex-basis distinto de auto suele controlar la base antes que width. Min/max sizes todavía limitan el resultado.
.item {
min-inline-size: 0;
overflow-wrap: anywhere;
}Sin esto, contenido largo puede impedir shrink.
.item--end {
align-self: end;
}Sobrescribe align-items para un item.
.row {
display: flex;
align-items: baseline;
}Alinea baselines de contenido textual; fuentes y controles pueden producir resultados diferentes.
.dialog-actions {
justify-content: safe center;
}safe evita una alineación que empuje contenido fuera del área visible cuando se soporta en el contexto.
.columns > * {
flex: 1 1 0;
min-inline-size: 0;
}Bases cero favorecen tamaños iguales; flex: 1 1 auto conserva diferencias de contenido.
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.cards > * {
flex: 1 1 18rem;
}Los items crecen y saltan de línea sin breakpoint.
flex: 1 usa base cercana a cero.¿Por qué dos items con flex-grow: 1 pueden terminar con tamaños diferentes?
Porque grow reparte el espacio sobrante, pero cada item puede partir de un flex-basis diferente.
CSS Grid introduce layout bidimensional.