Flexbox, modelo de caja flexible en CSS

Tabla de contenidos

Propiedades Flexbox CSS
5. Ejemplo práctico

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

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

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

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

5. Ejemplo práctico

Ver más sobre elementos flexibles