Flexbox Avanzado

Aprende a dominar Flexbox con ejemplos prácticos: configura el contenedor con display: flex, centra el contenido, controla el crecimiento con flex-grow y el atajo flex, y alinea elementos con align-self. Todo enfocado en un workflow claro y listo para aplicar en tus componentes en CSS.

¿Cómo configurar el contenedor y los items en Flexbox?

Para activar el modelo de Flexbox, el primer paso es convertir el contenedor en un contexto flexible con display: flex. Así se habilitan las propiedades que permiten distribuir y alinear los elementos internos de forma eficiente. También se aplica min-height: 100px para asegurar una altura mínima, y se usa margin-bottom y padding para separar y dar aire visual.

.container {
  display: flex;
  min-height: 100px;
  /* margin-bottom: ...; */
  /* padding: ...; */
  /* background: ... (gris utilizado previamente) */
}

¿Cómo se centra el texto dentro del item?

Cada elemento dentro del contenedor es un item. Para centrar su contenido horizontalmente se usa text-align: center. Además, se aplica padding para generar espacio interno, margin para separación entre tarjetas, un background azul y color: white para contraste.

.item {
  text-align: center;
  padding: 20px;
  margin: 5px;
  background: #3498db;
  color: white;
}

• Activar contexto flexible con display: flex.
• Asegurar altura mínima con min-height: 100px.
• Separar bloques con margin-bottom y dar aire con padding.
• Centrar texto con text-align: center.

¿Cómo hacer que los elementos crezcan con flex-grow y flex?

Cuando hay espacio libre en el contenedor, flex-grow permite que los items crezcan para ocuparlo. Así controlas la proporción de crecimiento entre elementos vecinos de forma simple.

¿Qué hace flex-grow 0, 1 y 2?

• 0: no crece para ocupar espacio extra.
• 1: crece proporcionalmente al resto que también tiene 1.
• 2: crece el doble respecto a los que tienen 1.

.grow { /* aplicado al elemento con clase correspondiente */
  flex-grow: 1;
}

Ejemplo de uso: si un item tiene .grow con flex-grow: 1, ocupará espacio libre; si otro tiene valor 2, crecerá el doble que el de 1.

¿Cuándo usar el shorthand flex?

El atajo flex agrupa varias configuraciones en una sola línea. En el ejemplo, flex: 1 se comporta como el crecimiento proporcional visto con flex-grow.

.flex.uno { /* elemento con clases: flex y uno */
  flex: 1;
}

.flex.dos { /* elemento con clases: flex y dos */
  flex: 2;
}

• flex: 1 hace que el item crezca para ocupar el espacio disponible.
• flex: 2 crece el doble que los que tienen flex: 1.
• Útil cuando quieres definir crecimiento de manera breve y consistente.

¿Cómo alinear contenido con align-self?

Para alinear items de forma independiente, align-self permite posicionarlos en el eje cruzado. Con flex-start se sitúan arriba y con flex-end abajo. El alto visible se adapta al contenido y al padding aplicado.

.self.start { /* elemento con clases: self y start */
  align-self: flex-start;
}

.self.end { /* elemento con clases: self y end */
  align-self: flex-end;
}

• align-self: flex-start: alinea el item en la parte superior.
• align-self: flex-end: alinea el item en la parte inferior.
• El espacio visible depende del contenido y del padding del item.

¿Quieres ver más patrones con Flexbox o tienes un caso específico? Cuéntalo en los comentarios y construyamos la mejor solución paso a paso.