Tabla de contenidos
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.
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; }
0
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:
#container{ display: flex; flex-wrap: wrap; }
0
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:
#container{ display: flex; justify-content: flex-start; }
0
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:
#container{ display: flex; flex-direction: row; align-items: stretch; }
0
0
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.