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.