Flexbox en CSS

¿Qué es Flexbox?

El modelo flexbox (caja flexible) es un método de diseño en CSS que organiza elementos dentro de un contenedor. Este modelo permite una distribución eficiente del espacio y alineación, ideal para interfaces modernas.

Propiedades del Contenedor Flex

• display: flex;: Define un contenedor flexible.
• justify-content: Alinea los elementos horizontalmente.
  • flex-start: Elementos alineados al inicio.
  • center: Elementos centrados.
  • space-between: Espacio uniforme entre elementos.
• align-items: Alinea los elementos verticalmente.
  • flex-start: Elementos alineados en la parte superior.
  • center: Elementos alineados al centro vertical.
• flex-wrap: Permite que los elementos se envuelvan en varias líneas.

Ejemplo Práctico

Propiedades de los Elementos Flexibles

• flex-grow: Define cuánto puede crecer un elemento respecto a los demás.
• flex-shrink: Define cuánto puede reducirse un elemento respecto a los demás.
• flex-basis: Establece el tamaño base de un elemento antes de aplicar flex-grow o flex-shrink.
• order: Cambia el orden visual de los elementos flexibles.

Configuración Avanzada

El siguiente ejemplo muestra cómo manipular propiedades de los elementos flexibles:

/* Configuración avanzada de Flexbox */
.flex-item {
    flex: 2 1 200px; /* flex-grow, flex-shrink, flex-basis */
    order: 1;       /* Elemento se mostrará al final */
}