Entradas

flex: 1

  flex: 1  explicado de forma sencilla flex: 1  es una propiedad  mágica  en CSS Flexbox que le dice a un elemento:  "ocupa todo el espacio que puedas" . 🔍  ¿Qué significa exactamente? flex: 1  es una  abreviatura  de tres propiedades: css flex : 1 ; /* Es equivalente a: */ flex-grow : 1 ; /* Puede crecer */ flex-shrink : 1 ; /* Puede encogerse */ flex-basis : 0% ; /* Empieza desde 0 */ 📊  Analogía visual Imagina que tienes una mesa y 3 personas: text Sin flex: 1 (todos toman solo su espacio): ┌─────────────────────────────────┐ │ [Yo] [Tú] [Él] │ │ 30px 20px 40px │ └─────────────────────────────────┘ ↑ Mucho espacio vacío Con flex: 1 (todos se reparten el espacio): ┌─────────────────────────────────┐ │ [ Yo ] [ Tú ] [ Él ] │ │ 1/3 1/3 1/3 │ └─────────────────────────────────┘ ↑ Todos ocupan lo mismo 🎨   Ejemplo práctic...
Publicar un comentario
Leer más

Flexbox-altura

  Conceptos Fundamentales 1.  Flexbox - El contenedor padre Cuando quieres elementos uno al lado del otro, necesitas un  contenedor padre  con  display: flex : css .contenedor { display : flex ; /* Activa Flexbox */ flex-direction : row ; /* Por defecto: horizontal */ } Tu error inicial:  Cada tarjeta tenía  margin: 0 auto , lo que las centraba individualmente, pero no las ponía en línea. 2.  Problema de alturas desiguales ¿Por qué se desalineaban header y footer? Sin Flexbox, cada tarjeta tiene la altura de su contenido: Tarjeta "Secretaria": poco contenido → más baja Tarjeta "Estadísticas": más contenido → más alta text ┌─────────┐ ┌──────────┐ │Header │ │Header │ ├─────────┤ ├──────────┤ │Body │ │Body │ │ │ │Body │ ├─────────┤ │Body │ │Footer │ ├──────────┤ └─────────┘ │Footer │ └──────────┘ ¡No alineados! 3.  Solución: Estructura de 3 partes con Flex css .card { ...
Publicar un comentario
Leer más