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

Otra de las características más relevantes del Modelo de caja flexible es la capacidad para diseñar el espacio libre. Cuando el tamaño de los elementos hijos no llena todo al contenedor, queda un espacio libre que tiene que ser colocado en algún lugar en el diseño. Veamos un ejemplo:

Código 2-50

Distribución del espacio libre en un contenedor flexible.

Hágalo usted mismo

Agregue otras propiedades a los elementos, como fondo de color, altura o borde, para poder ver e identificar a cada uno en pantalla.

En el Código 2-50 el tamaño de nuestro contenedor flexible es 600 px y cada elemento hijo tiene 100 px de ancho. Por tanto, hay 200 px de espacio libre.

Podemos elegir diferentes formas de distribuir el espacio libre. Por defecto, los elementos hijos están ordenados de acuerdo a la Figura 2-10, de inicio a fin del eje principal (por lo general de izquierda a derecha), dejando el espacio libre al final. Sin embargo, la propiedad justify-content ofrece alternativas, pues establece cómo se distribuyen en el eje principal de un contenedor flexible tanto los elementos hijos como el espacio sobrante. Esta propiedad puede tomar cinco valores: flex-start, flex-end, center, space-between and space-around. Si la propiedad no es declarada, se aplica el valor flex-start por defecto, que alinea los elementos hacia el inicio del eje principal y el espacio libre hacia el final del eje principal (de izquierda a derecha o de arriba hacia abajo).

Figura 2-10

Las cajas y el espacio libre en el interior de un contenedor flexible.

Código 2-51

Distribución del espacio libre con justify-content.

Las siguientes figuras muestran el potencial de esta propiedad y el efecto del modelo de caja flexible.

Figura 2-11

Distribución del espacio libre con justify-content: flex-start.

Figura 2-12

Distribución del espacio libre con justify-content: flex-end.

Figura 2-13

Distribución del espacio libre con justify-content: center.

Figura 2-14

Distribución del espacio libre con justify-content: space-between.

Figura 2-15

Distribución del espacio libre con justify-content: space-around.