Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 81

Para que un elemento dentro de un contenedor flexible sea también flexible tiene que ser declarado como tal mediante la propiedad flex. Esta propiedad, que también puede declarar que una caja no es flexible, ayuda a distribuir el espacio entre las cajas. Puede usar tres posibles parámetros, separados por un espacio: flex-grow, flex-shrink y flex-basis. Para declarar una caja como flexible deberá dar un valor mínimo de 1 al primer parámetro, flex-grow. Este parámetro declara la relación de expansión del elemento o, en otras palabras, qué tanto crecerá el elemento dependiendo de la configuración de los elementos hermanos. El segundo parámetro, flex-shrink, declara la relación de reducción o qué tanto podrá ser reducido el elemento según la configuración de sus hermanos. Por último, el tercer parámetro, flex-basis, indica un tamaño inicial para el elemento que será considerado al distribuir el espacio libre entre todos los elementos que se encuentran dentro del mismo contenedor.

Las cajas flexibles, entonces, se amplían o se reducen para rellenar el espacio disponible dentro de su elemento padre. La distribución del espacio dependerá de las propiedades del resto de las cajas. Si todos los elementos del contenedor han sido declarados como flexibles, el tamaño de cada uno de ellos dependerá del tamaño de su elemento padre y del valor de la propiedad flex. Veamos un ejemplo:

Código 2-43

Declarar las cajas flexibles con flex.

Figura 2-5

El espacio se distribuye de forma equitativa.

En el ejemplo del Código 2-43 declaramos solo el valor flex-grow para la propiedad flex para determinar cómo se ampliarán las cajas. El tamaño de cada caja se calcula multiplicando el valor del tamaño de la matriz por el valor de su propiedad flex y luego dividiendo el resultado entre la suma de los valores flex-grow de todos los elementos hijos. Por ejemplo, la fórmula para el elemento caja1 es de 600 × 1/4 = 150. El valor 600 es el tamaño del contenedor, el 1 es el valor de la propiedad flex para caja1 y el 4 es la suma de los valores de la propiedad flex de cada elemento hijo. Como todas las cajas de nuestro ejemplo tienen un valor igual a 1 para la propiedad flex, el tamaño de todas ellas es 150 px.

Hágalo usted mismo

Copie las reglas CSS del Código 2-43 en el archivo test.css y abra el documento HTML que contiene el Código 2-41 en su navegador. Recuerde que debe añadir los prefijos correspondientes a estas nuevas propiedades antes de la prueba (por ejemplo, -webkit-flex).

El potencial de esta propiedad se hace evidente al proporcionar valores diferentes y realizar combinaciones:

Código 2-44

Creación de una distribución desigual.

En el Código 2-44 cambiamos el valor de la propiedad flex para caja1 a 2. Ahora la fórmula para calcular el tamaño de esta caja es: 600 × 2/5 = 240. Como no hemos cambiado el valor del contenedor, el primer valor de la fórmula no varía pero el segundo valor es ahora 2 (el nuevo valor de la propiedad flex para esta caja). Y ahora la suma de los valores de todas las propiedades de los elementos hijos es 5 (2 para la caja 1 y 1 para cada una de las otras tres cajas). La fórmula para calcular el tamaño del resto de los elementos del contenedor es por tanto: 600 × 1/5 = 120.

Al comparar los resultados podemos comprender cómo se distribuye el espacio. El espacio disponible se divide en segmentos de acuerdo a la suma de los valores de la propiedad flex de cada elemento hijo (de un total de 5 en nuestro ejemplo). A continuación, los segmentos se distribuyen entre las cajas. El elemento de caja1 obtiene dos segmentos y el resto de los elementos hijos reciben solo un segmento cada uno, porque el valor de sus propiedades flex es 1.

El efecto de esta propiedad se representa en la Figura 2-6. La ventaja es que cuando se agrega un nuevo elemento al contenedor no es necesario calcular el tamaño que le será asignado porque éste será calculado automáticamente.

Figura 2-6

El espacio se distribuye de acuerdo con el valor de flex.

Esto es interesante, pero hay más escenarios: imagine que uno de los elementos no es flexible y tiene un tamaño explícito: los otros elementos anidados compartirán el resto del espacio disponible.

Código 2-45

Combinación de elementos flexibles y no inflexibles.

La primera caja del Código 2-45 tiene un tamaño de 300 px, por lo que el espacio disponible para distribuir entre el resto de los elementos hijos es de 300 px (es decir: 600 − 300 = 300). El navegador calculará el tamaño de cada caja flexible con la misma fórmula que usamos antes: 300 × 1/3 = 100.

Figura 2-7

Solo se distribuye el espacio libre.

Del mismo modo puede trabajar con varias cajas de tamaño explícito. El principio es el mismo: el espacio libre se distribuirá entre las cajas flexibles.

También es posible que tenga que declarar un tamaño flexible para el elemento y en ese caso será necesario usar el resto de los parámetros disponibles para la propiedad flex (flex-shrink y flex-basis). Observe este ejemplo:

Código 2-46

Controlar cómo reducir los elementos.

En este ejemplo hemos proporcionado tres parámetros para la propiedad flex de cada caja. Todas las cajas tienen el valor 1 para el primer parámetro (flex-grow) y, por tanto, la misma relación de expansión. La diferencia está en los valores de flex-shrink y flex-basis.

Importante

Un valor 0 para las propiedades flex-grow o flex-shrink no permitirá que el elemento sea ampliado o reducido, respectivamente. Para que haya flexibilidad, los valores de estos parámetros deben ser mayores o iguales a 1.

El parámetro flex-shrink funciona de forma similar a flex-grow pero determina la proporción en la que las cajas se reducirán para encajar en el espacio disponible. En nuestro ejemplo, el valor de este parámetro es 1 para la caja 1 pero para el resto de las cajas es igual a 5, lo que asigna un espacio mayor a la caja 1.

El parámetro flex-basis, como hemos mencionado antes, establece un valor inicial para el elemento. Al calcular los valores de reducción o expansión de elementos flexibles, se considera primero el valor del parámetro flex-basis. Cuando este valor es igual a 0 o no es declarado, el valor tomado en cuenta es el tamaño del contenido de los elementos.

También puede utilizar la palabra clave auto para que el navegador utilice el valor de la propiedad width como referencia, como veremos en el ejemplo que presentaremos en el ejemplo del Código 2-46. En este caso, el parámetro flex-basis tiene el valor auto, así que se establece como tamaño inicial el valor de width.

Hágalo usted mismo

Copie las reglas CSS del Código 2-46 en el archivo test.css para comprobar los efectos de las diferentes combinaciones de los tres parámetros de la propiedad flex. Como no hemos declarado el tamaño del elemento contenedor, cuando la ventana del navegador se expanda el elemento padre se ampliará también y todos los elementos crecerán en la misma proporción. Por el contrario, cuando el tamaño de la ventana se reduzca, el elemento caja1 se reducirá en otra proporción, ya que el valor especificado para flex-shrink es 1 en lugar de 5. Le recomendamos de nuevo añadir otras propiedades a los elementos, como color de fondo o un borde, para obtener una mejor apariencia y poder identificar cada caja en pantalla.

Código 2-47

Definición de cajas flexibles con el tamaño deseado.

En el Código 2-47, cada caja tiene el valor de la propiedad width como primera opción, pero después de que todas las cajas son colocadas, sobra un espacio de 100 px. Este espacio adicional se divide entre las cajas flexibles. Para calcular el espacio asignado a cada casilla se utiliza la misma fórmula: 100 × 1/4 = 25. Esto significa que se añadirán 25 px al ancho inicial de cada caja.

Figura 2-8

Añadir el espacio libre al ancho de cada caja.