Guías Técnicas

Diseño Responsive con Flexbox

El Flexbox (Flexible Box Layout) es una herramienta poderosa en CSS que facilita la creación de diseños responsivos y adaptativos. A continuación, se presentan los conceptos clave y ejemplos de uso.

¿Qué es Flexbox?

  Flexible Box Layout

Flexbox es un modelo de diseño unidimensional que permite alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido o dinámico.

  Beneficios de Flexbox

  • Alineación fácil: Permite alinear elementos horizontal y verticalmente con facilidad.
  • Distribución del espacio: Proporciona control sobre el espacio disponible entre los elementos.
  • Orden flexible: Permite cambiar el orden visual de los elementos sin alterar el HTML.

Propiedades Principales

  Contenedor Flex

  • display: flex;: Activa el modo Flexbox en el contenedor.
  • flex-direction: Define la dirección de los elementos (row, row-reverse, column, column-reverse).
  • justify-content: Alinea los elementos en el eje principal (flex-start, center, space-between, etc.).
  • align-items: Alinea los elementos en el eje cruzado (stretch, flex-start, center, etc.).

  Elementos Flex

  • flex-grow: Define la capacidad de un elemento para crecer.
  • flex-shrink: Define la capacidad de un elemento para encogerse.
  • flex-basis: Define el tamaño inicial de un elemento.

Ejemplo Básico

css 
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  margin: 10px;
}

Para más información sobre Flexbox, visita la documentación de MDN sobre Flexbox.