flex-basis

• Propiedades de los hijos
  1. flex-basis

     Tamaño

     .hijo { flex-basis: 200px; } Todos los hijos tienen tamaño de 200 px. Es exactamente lo mismo que si decimos .hijo { width: 200px; } (o height). Si cada hijo va a tener un tamaño diferente, entonces hay que especificar el width o height de cada uno por separado.

     Contenido

     max-content y min-content.
     max-content — lo más ancho que querría ser. El navegador mide la frase entera puesta en una sola línea y le da ese ancho.
     min-content — lo más estrecho que puede ser sin romperse. El navegador estrecha la caja todo lo que puede, y el límite es la palabra más larga, porque una palabra no se parte por la mitad. El texto se reparte en varias líneas.

     auto

     auto no es un tamaño: es «el tamaño no lo decido aquí». Cuando el navegador se encuentra auto, hace dos preguntas en este orden:

     1. ¿Esta caja tiene width escrito? Si lo tiene, ese es su tamaño.
     2. ¿No tiene width? Entonces mide lo que ocupe su contenido.