Flexbox, modelo de caja flexible en CSS

Propiedades flexbox CSS

El modelo de caja flexible o flexbox nos ofrece un mecanismo con el que dividir el espacio disponible en la ventana, y crear las filas y columnas necesarias para la implementación del diseño de una página web. Este modelo flexible no necesita utilizar los métodos tradicionales de posicionamiento de cajas (static, relative, absolute, float…) sino que organiza los elementos utilizando contenedores flexibles.

1. display: flex

Para utilizar las propiedades de flexbox es necesario crear un contenedor padre que configure las características de los elementos hijos. A este contenedor padre debemos declararle la propiedad «display:flex«. Veamos un ejemplo:

#container{
     display: flex;
}

Ejemplo

0

2. flex-wrap: nowrap | wrap | wrap-reverse

Podemos indicar qué elementos flexibles se deben trasladar cuando no hay suficiente espacio en el contenedor mediante la propiedad flex-wrap. Sus valores son los siguientes:

• nowrap: los elementos no pasan a la siguiente fila y se reduce su anchura para mostrarlos. Este es el valor por defecto.
• wrap: los elementos pasan a la siguiente fila y conservan su anchura.
• wrap-reverse: los elementos pasan a la siguiente fila, pero en sentido inverso al de su
  declaración.

#container{
     display: flex;
     flex-wrap: wrap;
}

Ejemplo

0

3. justify-content: flex-start | flex-end | center | space-between |space

La propiedad justify-content es la que define la justificación horizontal de los elementos hijos de un contenedor flexible. Esta propiedad acepta cinco valores:

• flex-start: posiciona los elementos a la izquierda del contenedor. Valor por defecto.
• flex-end: posiciona los elementos a la derecha del contenedor.
• center: centra los elementos en el contenedor
• space-between: añade un espacio idéntico entre los elementos. El primer elemento está alineado a la izquierda del contenedor, y el último, a la derecha.
• space-around: espacia de forma regular los elementos que no están alineados a la izquierda y a la derecha del contenedor.

#container{
     display: flex;
     justify-content: flex-start;
}

Ejemplo

0

4. align-items: stretch | flex-start | flex-end | center | baseline

La propiedad align-items actúa sobre el eje vertical. Para utilizar esta propiedad primero se debe definir la propiedad flex-direction: row.

La propiedad align-items acepta cinco valores:

• stretch: los elementos se amplían verticalmente para ocupar toda la altura disponible en el contenedor. Este es el valor por defecto.
• flex-start: los elementos se colocan en la parte superior del contenedor.
• flex-end: los elementos se colocan en la parte inferior del contenedor.
• center: los elementos se colocan en el centro del contenedor.
• baseline: los elementos se alinean sobre la línea de base del texto.

#container{
     display: flex;
     flex-direction: row;
     align-items: stretch;
}

Ejemplo

0

5. flex-direction: row | row-reverse | column | column-reverse

La propiedad flex-direction determina la dirección principal en la que los elementos flexibles se colocan dentro de un contenedor flex. Puede establecerse para organizar los elementos en una fila (horizontal) o en una columna (vertical).

La propiedad flex-direction acepta cuatro valores:

• row (valor por defecto): Coloca los elementos en una fila horizontal. El inicio está a la izquierda y el final a la derecha.
• row-reverse: Coloca los elementos en una fila horizontal, pero en orden inverso al valor por defecto. El inicio estará a la derecha y el final a la izquierda.
• column: Coloca los elementos en una columna vertical. El inicio está arriba y el final abajo.
• column-reverse: Coloca los elementos en una columna vertical, pero en orden inverso al valor por defecto. El inicio estará abajo y el final arriba.

#container {
     display: flex;
     flex-direction: row;
   }

Ejemplo

0

6. Otras propiedades

Las propiedades de flexbox que hemos visto son las más comunes y utilizadas para controlar el comportamiento de los elementos flex. Sin embargo, hay más propiedades disponibles que te permiten tener un mayor control sobre el diseño de tus elementos flex. Algunas de estas propiedades adicionales incluyen order, flex-grow, flex-shrink, y flex-basis, entre otras. Veamos un resumen de algunas de las propiedades más utilizadas.

Propiedad	Descripción	Valores Ejemplo
display	Define el contenedor como un flex container	flex
flex-wrap	Controla si los elementos flex deben envolverse o no	nowrap (por defecto), wrap, wrap-reverse
justify-content	Alinea los elementos a lo largo del eje principal	flex-start (por defecto), flex-end, center, space-between, space-around, space-evenly
align-items	Alinea los elementos a lo largo del eje secundario	stretch (por defecto), flex-start, flex-end, center, baseline
flex-direction	Especifica la dirección principal de los elementos	row (por defecto), row-reverse, column, column-reverse
flex-grow	Controla cómo los elementos flex se expanden	Número (valor relativo)
flex-shrink	Controla cómo los elementos flex se encogen	Número (valor relativo)
flex-basis	Establece el tamaño inicial de los elementos flex	Valor, auto (por defecto)
order	Controla el orden de los elementos flex dentro del contenedor	Número (entero)
align-self	Alinea un elemento individual a lo largo del eje secundario	auto (por defecto), flex-start, flex-end, center, baseline, stretch

Ejemplo práctico

0

Ejercicio propuesto

Actividad 10.

Utiliza el modelo de caja flexible para crear dos contenedores (o más) con elementos flexibles. Haz uso de las propiedades flex-wrap, justify-content y align-items.