Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Flexbox y Grid en CSS

Flexbox y Grid son dos sistemas modernos de maquetación que permiten diseñar interfaces web de forma más intuitiva y potente que con floats o posicionamiento manual. Con ellos puedes crear estructuras complejas, centrados verticales y horizontales, rejillas responsivas y distribuciones adaptables sin hacks ni márgenes mágicos.

¿Qué es Flexbox?

Flexbox (Flexible Box Layout) es un sistema unidimensional: organiza los elementos en una fila o una columna. Está pensado para distribuir espacio entre elementos y alinear contenido, incluso cuando su tamaño es desconocido o dinámico.

Contenedor Flex

Para usar Flexbox, se debe declarar display: flex en el contenedor. Esto activa el comportamiento flexible para sus elementos hijos.

.contenedor {
    display: flex;
}

Dirección de los elementos

La propiedad flex-direction determina si los elementos se colocan en fila o columna.

  • row: en fila horizontal (por defecto).
  • column: en columna vertical.
  • row-reverse y column-reverse: invierten el orden.
.contenedor {
    display: flex;
    flex-direction: row;
}

Distribución de espacio

Usa justify-content para alinear horizontalmente:

  • flex-start, center, flex-end
  • space-between, space-around, space-evenly
.contenedor {
    justify-content: space-between;
}

Usa align-items para alinear verticalmente:

  • stretch (por defecto), flex-start, center, flex-end, baseline
.contenedor {
    align-items: center;
}

Centrado perfecto

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
}

Esto centra cualquier elemento hijo tanto horizontal como verticalmente.

Flex-wrap

Por defecto, los elementos se colocan en una única línea. Para permitir que salten a la siguiente:

.contenedor {
    flex-wrap: wrap;
}

Propiedades en los hijos

  • flex-grow: permite que el elemento crezca.
  • flex-shrink: permite que se reduzca.
  • flex-basis: tamaño inicial antes de distribuir espacio.

O usar la abreviada flex:

.item {
    flex: 1 1 200px;
}

¿Qué es CSS Grid?

Grid Layout es un sistema bidimensional que organiza el contenido en filas y columnas. Es ideal para diseños complejos, como cuadrículas, cabeceras, pies de página y disposiciones de varias áreas.

Contenedor Grid

Para usar Grid, se declara display: grid en el contenedor:

.grid {
    display: grid;
}

Definir columnas y filas

.grid {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
}

fr significa “fracción del espacio disponible”. También se pueden usar px, % o auto.

Espaciado entre celdas

.grid {
    gap: 1em;
}

Posicionamiento de elementos

Los hijos se colocan automáticamente, o puedes ubicarlos manualmente:

.item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

Áreas con nombres

Define zonas con nombres y asígnalas fácilmente:

.grid {
    grid-template-areas:
        "header header"
        "menu   main"
        "footer footer";
}
.header {
    grid-area: header;
}

Responsividad

Puedes usar repeat(), minmax() o auto-fit para diseños adaptables:

.grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Cuándo usar Flex o Grid

  • Flex: para alineación de elementos en una sola dirección (fila o columna).
  • Grid: para estructuras complejas con filas y columnas.

Buenas prácticas

Valores universales: Las propiedades display, justify-content, align-items, grid-template-columns, etc. aceptan initial, inherit, unset.

No mezcles Flex y Grid en el mismo contenedor, pero sí puedes usar Grid por fuera y Flex por dentro, o viceversa.

Usa clases descriptivas en lugar de confiar solo en la estructura del HTML.

Evita valores fijos excesivos; combina fr, auto, minmax() para adaptabilidad.

Revisa en pantalla pequeña: asegúrate de que los elementos se reorganizan correctamente o hacen wrap cuando deben.

TOP