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.