La respuesta corta: flex-shrink y flex-basis son probablemente lo que estás buscando.
La respuesta larga
Digamos que desea alinear una imagen y un texto uno al lado del otro con algo así:
Ahora digamos que busca flexbox para que suceda. Establecer el elemento padre en display: flex; es un buen primer comienzo.
.container {
display: flex;
}Y esto da como resultado …
Ver la pluma
Ejemplo 1 de encogimiento flexible por Robin Rendle (@robinrendle)
en CodePen.
¡Ay! Bueno, eso está un poco bien, supongo. Tiene sentido que la imagen choca contra el texto de esa manera porque no hemos establecido un width en la imagen. Idealmente, sin embargo, nos gustaría que esa imagen tuviera un ancho fijo y luego el texto debería ocupar el espacio sobrante.
Bien, ¡vamos a hacer eso!
.container {
display: flex;
}
img {
width: 50px;
margin-right: 20px;
}Ver la pluma
Ejemplo 2 de Flex-Shrink por Robin Rendle (@robinrendle)
en CodePen.
Esto se ve muy bien en Chrome. Pero espera, ¿qué? Si inspeccionamos la etiqueta de la imagen en Firefox DevTools, encontraremos que no es el valor de ancho que configuramos en absoluto:
Podríamos usar min-width para forzar la imagen al ancho de 50px que queremos:
img {
min-width: 50px;
margin-right: 20px;
}Buuuuuuut, eso solo ayuda con el ancho, así que tenemos que poner un margen también.
img {
min-width: 50px;
margin-right: 20px;
}Aquí vamos. Eso es mejor en Firefox y todavía funciona en Chrome.
La respuesta aún más larga
Me di cuenta de que la imagen está recibiendo el tratamiento aplastado porque necesitamos usar la propiedad flex-shrink para decirle a los elementos flexibles que no disminuyan de tamaño, independientemente de si tienen o no un ancho.
Todos los elementos flexibles tienen flex-shrink valor de 1. Necesitamos establecer el elemento de imagen en 0:
.container {
display: flex;
}
img {
width: 50px;
margin-right: 20px;
flex-shrink: 0;
}Ver la pluma
Ejemplo 3 de encogimiento flexible por Robin Rendle (@robinrendle)
en CodePen.
¡Mejorando! Pero aún podemos hacer más para mejorar esto.
La respuesta cortada del director
Podemos ordenar las cosas aún más porque flex-shrink está incluido en el flex propiedad taquigráfica.
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]Si configuramos el flex-shrink valor para 0 y el flex-basis valor al ancho predeterminado que queremos que tenga la imagen, entonces podemos deshacernos del width propiedad en conjunto.
.container {
display: flex;
}
img {
flex: 0 0 50px;
margin-right: 20px;
}Oh sí:
Ver la pluma
Ejemplo 2 de encogimiento flexible por Geoff Graham (@geoffgraham)
en CodePen.
Otro ejemplo
Ese flex-shrink La propiedad resuelve muchos otros problemas y es muy importante si desea comenzar a usar flexbox. Aquí hay otro ejemplo de por qué: me topé con otro problema como el anterior y lo mencioné en una edición reciente del boletín. Estaba creando un componente de navegación que permitiría a los usuarios desplazarse hacia la izquierda y hacia la derecha a través de varios elementos. Noté el siguiente problema al revisar mi trabajo:
Ver la pluma
elemento de navegación flex-shrink 1 por Robin Rendle (@robinrendle)
en CodePen.
Ese elemento de navegación más largo no debería dividirse en varias líneas de esa manera, pero finalmente entendí por qué sucedía esto, gracias al problema anterior. Si configura el flex-shrink propiedad a 0 luego le dirá a cada elemento en esta navegación que no se encoja y en su lugar asuma el ancho del contenido, así:
Ver la pluma
elemento de navegación flex-shrink de Robin Rendle (@robinrendle)
en CodePen.
Y, sí, podemos dar un paso adicional una vez más para usar el flex propiedad en su lugar, esta vez usando auto como el flex-basis ya que queremos que se considere la cantidad máxima de espacio para todos los elementos al dividir el espacio en el contenedor de navegación.
Ver la pluma
Configuración de flex para elementos de navegación flexibles por Geoff Graham (@geoffgraham)
en CodePen.
¡Hurra! Lo averiguamos. Aunque la respuesta es una sola línea de código, es bastante esencial para crear elementos verdaderamente flexibles.