Clase 20 - Diseño basado en FlexBox

Flexbox, o el modelo de caja flexible, es una herramienta poderosa en CSS3 diseñada para mejorar la forma en que se manejan los layouts en las interfaces web.

Permite un control más eficiente del espacio y la alineación de los elementos en un contenedor, incluso cuando sus tamaños son desconocidos o dinámicos.

Flexbox facilita la creación de diseños responsivos y adaptables sin necesidad de recurrir a hacks o soluciones complicadas.

Conceptos Básicos de Flexbox

Flexbox se basa en dos conceptos principales: contenedores flexibles y elementos flexibles.

El contenedor flexible define un contexto flex, y sus hijos directos se convierten en elementos flexibles.

Contenedor Flex: El elemento que define el modelo de caja flexible. Las propiedades de Flexbox se aplican en él.
Elementos Flex: Los hijos directos de un contenedor flex.

Propiedades de Flexbox para el Contenedor

display

Define un elemento como contenedor flex.

.container {
  display: flex; /* También puede ser 'display: inline-flex' */
}

flex-direction

Define la dirección principal en la cual los elementos flex se apilan dentro del contenedor.

.container {
  flex-direction: row; 
  /* Opciones: row, row-reverse, column, column-reverse */
}

justify-content

Alinea los elementos flex dentro del contenedor en la dirección principal.

.container {
  justify-content: space-between; 
  /* Opciones: flex-start, flex-end, center, space-between, space-around, space-evenly */
}

align-items

Alinea los elementos flex en la dirección transversal (perpendicular a flex-direction).


.container {
  align-items: center; 
  /* Opciones: flex-start, flex-end, center, baseline, stretch */
}

flex-wrap

Permite que los elementos flex se envuelvan en múltiples líneas, en lugar de forzarlos a una sola línea.

.container {
  flex-wrap: wrap; 
  /* Opciones: nowrap, wrap, wrap-reverse */
}

Propiedades de Flexbox para los Elementos Flex

flex

Una propiedad abreviada para flex-grow, flex-shrink, y flex-basis.

.item {
  flex: 1 1 auto; 
  /* Permite que el elemento crezca y se encoja basado en el espacio disponible */
}

align-self

Permite a un elemento flex tener una alineación individual en el eje transversal, anulando la align-items del contenedor.

.item {
  align-self: stretch; 
  /* Opciones: auto, flex-start, flex-end, center, baseline, stretch */
}

Ejemplo Completo de Flexbox

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

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

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Este ejemplo crea un contenedor flex que centra sus elementos tanto vertical como horizontalmente y maneja el tamaño de sus elementos de manera dinámica.

Flexbox ofrece un sistema robusto y flexible para diseñar layouts que se adaptan automáticamente a diferentes tamaños de pantalla y dispositivos.

Al comprender y utilizar Flexbox, los desarrolladores pueden construir interfaces más limpias, más escalables y más intuitivas.

Clase 20 – Diseño basado en FlexBox