Siempre que necesito que dentro de un contendor flex, uno de los hijos tenga un ancho fijo y el otro ocupe el resto del espacio me surge el mismo problema. Parece tan sencillo como ponerle a ese segundo item un flex-basis: auto
. Pero sucede que el elemento con ancho automático no siempre entrará en la misma linea.
El otro día, tras darle muchas vueltas sin éxito, le consulté a Nabaroa, una crack que rápidamente me guió hacía la luz: «¿el padre tiene wrap?»
Y es que, aunque podría parecer que el item que tiene ancho automático debería coger el ancho sobrante en la misma linea, resulta que el wrap le hace irse siempre a la siguiente linea.
Al mismo tiempo, si en lugar de un ancho automático le asignamos un porcentaje, si que estará en la misma linea mientras haya espacio suficiente, pero se irá a la siguiente linea antes de lo que podría esperarse. Debería ocupar siempre la misma linea mientras que el ancho fijo del otro elemento no superen el 20% restante, ¿verdad? Pues no, lo baja a la siguiente linea antes de que esto suceda, según lo que he visto. Pero esto, es otra historia a investigar, y tampoco creo necesario hilar tan fino.
El caso es que, la lección aprendida es: si quieres que convivan siempre en la misma linea un elemento de ancho fijo más otro flexible, ponle flex-basis: auto
a este último y flex-wrap: nowrap
al padre.
Cabe destacar, que el valor por defecto de un contenedor flex es nowrap
, sin embargo, yo suelo poner siempre al flex container en wrap
por que suele ser más habitualmente necesario que los flex items salten a la siguiente linea cuando no caben. Por lo tanto, si no haces como yo, serás más feliz y no tendrás que cambiarle nada al padre.
¡Mil gracias Nabaroa por mostrarme la luz!
En el siguiente ejemplo se muestra lo que para mi es el ejemplo típico: un figure
que queremos que sea circular, con lo cual necesita tener ancho y alto fijos, junto con un texto que ha de ocupar todo el ancho sobrante. Aquí vemos como se comporta en los distintos casos:
See the Pen Flex con algunos anchos fijos by roberto tuñón (@rtunon) on CodePen.