HORA --:--
LECTURA 0:00

Conceptos Fundamentales de Flexbox y CSS Grid

Guía completa para dominar los modelos de diseño CSS

1. ¿Qué es Flexbox?

Definición: Es un modo de diseño CSS que permite posicionar los elementos de una página web para que se comporten de manera predecible al adaptarse a diferentes tamaños de pantalla y dispositivos.
Principal ventaja: Permite maquetar de una forma más rápida en comparación con los métodos tradicionales.
Característica clave: Un contenedor flexible tiene la capacidad de expandir sus elementos para rellenar el espacio libre o comprimirlos para evitar que rebasen el área prevista (overflow).
Compatibilidad: Está soportado en la gran mayoría de los navegadores actuales (Chrome, Edge, Safari, Firefox, Opera, etc.), abarcando más del 98% del uso global.

2. Anatomía de Flexbox (Los Ejes)

Todo el diseño de "caja flexible" se rige estrictamente por dos ejes perpendiculares:

Eje Principal (Main Axis): Es el eje a lo largo del cual los elementos flexibles se suceden unos a otros dentro del contenedor. Su tamaño se denomina Main size y va desde el main start hasta el main end.
Eje Secundario (Cross Axis): Es el eje perpendicular al eje principal. Su tamaño se denomina Cross size y va desde el cross start hasta el cross end.
Importante: La dirección de cada eje depende de la propiedad flex-direction aplicada al contenedor.

3. Componentes Básicos

Contenedor Flex (Flex Container)

Son las etiquetas HTML padre que, al aplicarles CSS, nos permiten controlar las características de sus elementos internos.

Elementos Flexibles (Flex Items)

Cada hijo directo dentro de un contenedor flex se convierte automáticamente en un elemento flexible.

4. Propiedades del Contenedor Padre

Estas reglas de CSS se aplican solo a la caja contenedora para dictar el comportamiento general de todos sus hijos.

Activación del modo Flex

Propiedad Descripción
display: flex; Establece un contenedor de ítems flexible en bloque, comportándose de forma equivalente a block.
display: inline-flex; Establece un contenedor de ítems flexible en línea, de forma equivalente a inline-block.

5. Dirección y Flujo

flex-direction (Eje Principal)

Determina el eje principal. Por defecto, la dirección de la flexibilidad es en fila (row).

Valor Comportamiento
row De izquierda a derecha (comportamiento por defecto)
row-reverse En fila, pero invirtiendo el orden (de derecha a izquierda)
column De arriba hacia abajo
column-reverse De abajo hacia arriba

flex-wrap (Gestión de Líneas y Desbordamiento)

Muy útil cuando los elementos salen del contenedor. Controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan. Los elementos pueden disponerse en una sola línea o en varias.

Valor Comportamiento
nowrap Valor original/por defecto. Los elementos intentan encajar en una sola línea, encogiéndose si es necesario.
wrap Los elementos saltan a la línea siguiente si no caben.
wrap-reverse Saltan a la línea siguiente, pero apilándose en dirección contraria.

flex-flow (Abreviatura)

Es la propiedad abreviada que nos permite aunar flex-direction y flex-wrap en una sola línea.

Ejemplos de uso:
flex-flow: row wrap;
flex-flow: column wrap-reverse;

6. Alineación en los Ejes

Alineación en el Eje Principal (justify-content)

Define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.

Valor Comportamiento
start / flex-start Pegados al inicio del eje
flex-end Pegados al final del eje
center Centrados en el eje
space-between El primer y último elemento se pegan a los bordes; el espacio restante se reparte uniformemente entre los demás.
space-around Espacio uniforme alrededor de cada elemento (los bordes tienen la mitad del espacio que hay entre dos elementos).
space-evenly El espacio es exactamente igual entre todos los elementos y los bordes.

Alineación en el Eje Secundario (align-items)

Define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.

Valor Comportamiento
stretch Los elementos se estiran para llenar el contenedor. (No funciona si los elementos tienen una altura definida)
flex-start / start Pegados al inicio del eje secundario
flex-end / end Pegados al final del eje secundario
center Centrados en el eje secundario
baseline Si los elementos contienen texto de distintos tamaños, se alinean tomando como referencia la línea base del texto.
¡OJO con align-content! Solo se aplica cuando tenemos varias líneas (es decir, cuando hay flex-wrap: wrap). Tiene los mismos valores que align-items y alinea las filas enteras respecto al contenedor global.

7. Propiedades de los Hijos (Flex Items)

Estas propiedades se declaran directamente en los elementos hijos para sobreescribir o ajustar el comportamiento individual dentro de la caja.

8. Orden Visual (order)

Propiedad: Cambia el orden visual en el que aparecen los elementos individuales, sin tocar el HTML.
Aspecto Detalle
Sintaxis order: número | initial | inherit;
Valor por defecto order: 0 (todos los elementos)
Ejemplo: ir al final order: 1 (se irá al final si el resto tiene 0)
Ejemplo: ir al principio order: -1 (se irá al principio)

9. Crecimiento, Contracción y Base

flex-grow (Crecimiento)

Definición: Define si un elemento crecerá para ocupar el espacio sobrante en el contenedor.
Aspecto Detalle
Sintaxis flex-grow: número | initial | inherit;
Valor por defecto 0 (el elemento no crecerá)
Ejemplo Si se le pone 1, ocupará el espacio; si a un hermano se le pone 3, crecerá ocupando 3 veces más espacio sobrante que el de valor 1.

flex-shrink (Contracción)

Definición: Define cuánto puede disminuir (contraerse) un elemento flex, si fuera necesario para evitar desbordar el contenedor.
Aspecto Detalle
Sintaxis flex-shrink: número | initial | inherit;
Valor por defecto 1 (todos se encogen por igual por defecto)
Ejemplo Un elemento con valor 3 se encogerá más rápido que los demás.

flex-basis (Base)

Definición: Especifica el valor inicial del tamaño principal de un elemento flex (antes de que actúen el grow o el shrink).
Aspecto Detalle
Valor por defecto auto

flex (Atajo)

Es la forma abreviada de escribir flex-grow, flex-shrink y flex-basis juntos.

Aspecto Detalle
Sintaxis flex: none | flex-grow [flex-shrink] [flex-basis];
Valor por defecto 0 1 auto

align-self (Alineación Individual)

Permite reposicionar un elemento de forma individual relativamente al eje transversal (eje secundario). Básicamente, sirve para sobrescribir la regla general de align-items que haya puesto el contenedor padre para un solo hijo específico.

Aspecto Detalle
Sintaxis align-self: auto | flex-start | flex-end | center | baseline | stretch;

10. Introducción a CSS Grid

Concepto principal: CSS Grid es un sistema de diseño bidimensional.
Propósito: Te permite organizar el contenido de tu web estructurándolo en filas y columnas de manera flexible y muy eficiente.
Ventaja clave: Simplifica enormemente la creación de diseños responsive (adaptables a distintas pantallas) sin tener que recurrir al uso de posiciones absolutas o elementos flotantes.

11. Inicializando el Contenedor (Grid Container)

Para empezar a utilizar las propiedades de Grid, debes activarlo en el elemento padre. Tienes dos opciones principales:

Propiedad Descripción
display: grid; Genera una cuadrícula flexible que se expande para ocupar todo el ancho del contenedor en el que se encuentra.
display: inline-grid; Genera una cuadrícula flexible, pero a diferencia de la anterior, únicamente ocupa el espacio que sea estrictamente necesario para albergar a sus elementos hijos.

12. Definiendo la Cuadrícula: Grid Tracks

Definición: Los grid tracks son, esencialmente, las filas y columnas que determinan toda la estructura de la cuadrícula. Para definir sus tamaños, puedes utilizar longitudes relativas o absolutas, como por ejemplo porcentajes, píxeles o fracciones (fr).

Unidades y Funciones de Tamaño

Fracciones (fr)

Esta unidad se encarga de repartir el espacio que queda disponible en el contenedor de forma completamente proporcional. Por ejemplo, usar 1fr 2fr 3fr divide el espacio asignando 1, 2 y 3 partes respectivamente.

La función minmax(min, max)

Es una herramienta vital para establecer límites, ya que permite fijar un tamaño máximo y un mínimo para una columna o fila concreta.

Parámetro Descripción
min Establece el límite inferior de tamaño (en em, px, fr, etc.).
max Establece el límite superior de crecimiento (puede ser un valor fijo o la palabra clave auto).
Casos de uso de minmax:

La función repeat()

Te permite repetir la declaración de filas o columnas de forma dinámica, ahorrando código.

Ejemplo:
repeat(3, 1fr)

Crea tres columnas iguales de una fracción.

13. Posicionamiento y Expansión de los Elementos

Una vez tienes el grid, CSS ofrece tres grandes estrategias para ubicar y expandir el contenido.

4.1. Uso de la propiedad span

Ejemplo:
grid-row: span 3;

El elemento abarcará 3 filas.

4.2. Posicionamiento mediante Líneas

Es crucial entender que en CSS Grid posicionamos basándonos en líneas, no en celdas.

Propiedades para trazar la ubicación:
Atajo (Shorthand):
grid-column: 1 / 4;

Ubica el contenido desde la columna 1 a la 4.

Nombrar líneas:

Para que la lectura del código sea mejor y el mantenimiento más sencillo, puedes dar nombres a las líneas usando corchetes, como por ejemplo [start], [middle] o [end]. Luego ubicas elementos invocando dichos nombres:

grid-column: start / middle;

4.3. Posicionamiento mediante Áreas (grid-template-areas)

Define el layout de una manera muy clara y visual.

Ejemplo:
grid-template-areas: "header header" "sidebar main";
.sidebar { grid-area: sidebar; }

14. Justificación, Alineación y Espaciado

Una vez posicionados, puedes controlar de forma precisa cómo se alinean y distribuyen los elementos internamente.

Alineación en los Ejes (X / Y)

Propiedad Eje / Aplicación Efecto
justify-items Horizontal Alinea de forma precisa los elementos dentro del eje horizontal de sus celdas.
align-items Vertical Alinea de forma precisa los elementos dentro del eje vertical de sus celdas.
justify-content Horizontal Alinea y distribuye todo el grid en su conjunto dentro del contenedor principal.
align-content Vertical Distribuye las filas del grid dentro del contenedor principal.

Propiedades Abreviadas (Shorthands) de alineación

place-items: Afecta al contenedor principal y combina align-items junto a justify-items para establecer la alineación horizontal y vertical de todos los elementos simultáneamente.
place-self: Se aplica a un elemento individual (grid item) combinando align-self y justify-self, forzando su alineación particular tanto en el eje vertical como en el horizontal.

Espaciado (Gap)

Para separar el contenido sin usar márgenes clásicos, utilizamos gap, que es un shorthand para modificar el espaciado global entre columnas y filas a la vez.

Propiedades individuales

column-gap: Solo para columnas.
row-gap: Solo para filas.

Propiedad combinada

gap: Shorthand que combina ambas propiedades para un espaciado global.

Glosario de Términos

Main Axis: Eje principal a lo largo del cual se suceden los elementos flexibles.
Cross Axis: Eje perpendicular al principal.
Main size: Tamaño del eje principal (desde main start hasta main end).
Cross size: Tamaño del eje secundario (desde cross start hasta cross end).
Flex Container: Elemento padre que controla el comportamiento de sus hijos.
Flex Items: Hijos directos del contenedor flexible.
Overflow: Rebasamiento del contenido fuera del área prevista.
Baseline: Línea base del texto usada para alineación.
Grid Tracks: Filas y columnas que determinan la estructura de la cuadrícula.
Grid Container: Elemento padre con display: grid que contiene la cuadrícula.
Grid Items: Elementos hijos directos del contenedor grid.
fr (fracción): Unidad que reparte el espacio disponible proporcionalmente.
minmax(): Función que establece límites mínimo y máximo de tamaño.
repeat(): Función que repite la declaración de filas/columnas dinámicamente.
span: Propiedad que indica cuántas celdas debe abarcar un elemento.
Gap: Shorthand para el espaciado entre filas y columnas.

Simulacro de Examen: Flexbox

Enfrentarse a un examen de CSS requiere mucha atención al detalle. ¡Simula esa presión con este test interactivo!

Sección 1: Verdadero o Falso

1. El eje secundario (cross axis) es siempre el eje vertical de la pantalla.

  • Verdadero
  • Falso
Respuesta correcta:

Falso. El eje secundario es perpendicular al eje principal. Si el eje principal es horizontal (row), el secundario será vertical. Pero si cambiamos la dirección a column, el eje principal será vertical y el secundario pasará a ser horizontal.

2. La propiedad align-content organiza los elementos en el eje secundario, pero solo funciona cuando tenemos varias líneas de elementos flexibles.

  • Verdadero
  • Falso
Respuesta correcta:

Verdadero. align-content está pensado específicamente para alinear líneas enteras dentro del contenedor cuando el contenido salta a una nueva línea (gracias a flex-wrap: wrap).

3. Si le asignamos a un elemento hijo la propiedad flex-grow: 0, este elemento no crecerá dentro del contenedor aunque haya espacio libre.

  • Verdadero
  • Falso
Respuesta correcta:

Verdadero. 0 es el valor por defecto de flex-grow, lo que indica que el elemento no crecerá para rellenar el espacio libre del contenedor.

4. La propiedad flex-flow es un atajo que nos permite definir justify-content y align-items al mismo tiempo.

  • Verdadero
  • Falso
Respuesta correcta:

Falso. La propiedad flex-flow nos permite aunar las propiedades flex-direction y flex-wrap, no las propiedades de alineación.

Sección 2: Selección Múltiple

5. ¿Qué ocurre si aplicamos align-items: stretch; a un contenedor flex, pero sus elementos hijos no se estiran?

  • a) Faltó añadir flex-grow: 1;
  • b) Los elementos hijos tienen una altura predefinida y, por tanto, stretch no funciona
  • c) Solo funciona si la dirección es column
  • d) Es necesario aplicar también align-content: stretch;
Respuesta correcta:

b) stretch no funciona si tenemos la altura definida en los elementos hijos.

6. ¿Cuál es el valor por defecto de la propiedad flex-shrink que define cuánto puede contraerse un elemento?

  • a) 0
  • b) 1
  • c) auto
  • d) inherit
Respuesta correcta:

b) El valor por defecto de flex-shrink es 1.

7. Tienes un menú de navegación y quieres que el primer enlace esté pegado al borde izquierdo, el último pegado al borde derecho, y los demás enlaces estén separados equitativamente en el centro. ¿Qué propiedad usas en el contenedor?

  • a) justify-content: space-around;
  • b) justify-content: center;
  • c) justify-content: space-between;
  • d) justify-content: space-evenly;
Respuesta correcta:

c) justify-content: space-between;. Esta propiedad pega los elementos de los extremos a los bordes y reparte el espacio restante entre los del medio.

8. ¿Qué atajo (shorthand) agrupa correctamente las propiedades flex-grow, flex-shrink y flex-basis en ese orden exacto?

  • a) flex-flow
  • b) flex
  • c) align-self
  • d) display: flex
Respuesta correcta:

b) La propiedad abreviada es flex, y su estructura es: flex: none | flex-grow [flex-shrink] [flex-basis];

Sección 3: Casos Prácticos

9. El Caso del Texto Desalineado: Tienes tres cajas una al lado de la otra. Dentro de cada caja hay texto, pero como el tamaño de las fuentes es distinto en cada caja, visualmente las palabras quedan a diferentes alturas. ¿Qué propiedad y valor aplicas al contenedor padre para解决这个问题?

Respuesta correcta:

Aplicamos align-items: baseline; al contenedor. Cuando tenemos texto, alinea los contenedores con respecto a la línea base del texto para que mantengan coherencia visual.

10. El Elemento Rebelde: Tienes un contenedor con align-items: center; para que todos los elementos se centren en el eje secundario. Sin embargo, el cliente te pide que solo el tercer elemento esté pegado al borde inferior (flex-end). ¿Qué propiedad le aplicas específicamente a ese tercer elemento hijo para saltarte la regla general del padre?

Respuesta correcta:

Aplicamos align-self: flex-end; al tercer elemento. La propiedad align-self sirve precisamente para reposicionar elementos individuales relativamente al eje transversal, sobrescribiendo el comportamiento de align-items asignado por el padre.

¡Test Completado!

0/10

¡Test de Flexbox Completado!

0/10

Simulacro de Examen: CSS Grid

Demuestra tu conocimiento sobre CSS Grid con este test interactivo.

1. ¿Cuál es la principal diferencia entre display: grid; y display: inline-grid; al inicializar un contenedor?

  • A) grid se utiliza para estructurar filas y inline-grid se utiliza exclusivamente para estructurar columnas.
  • B) grid ocupa todo el ancho del contenedor, mientras que inline-grid solo ocupa el espacio necesario para colocar sus elementos.
  • C) inline-grid no permite el uso de la unidad de medida fr en sus tracks.
  • D) grid posiciona sus elementos hijos de forma absoluta, mientras que inline-grid lo hace de forma relativa.
Respuesta correcta:

B) display: grid; crea una cuadrícula flexible que ocupa todo el ancho disponible, mientras que display: inline-grid; crea una cuadrícula que solo ocupa el espacio necesario para sus elementos.

2. ¿Qué función cumple la unidad de medida fr en CSS Grid?

  • A) Define un tamaño fijo y absoluto basado en fracciones de píxeles.
  • B) Calcula de forma automática el tamaño mínimo necesario para que el contenido de la celda no se desborde.
  • C) Distribuye el espacio disponible proporcionalmente respecto al total del contenedor.
  • D) Fuerza a que todas las columnas del contenedor tengan exactamente el mismo ancho.
Respuesta correcta:

C) La unidad fr (fracciones) se encarga de distribuir el espacio disponible de manera proporcional.

3. Si definimos la regla grid-template-columns: minmax(150px, 1fr); para una columna, ¿qué significa?

  • A) La columna nunca será mayor de 150px.
  • B) La columna tendrá un mínimo de 150px, pero si hay más espacio disponible, puede crecer hasta 1fr.
  • C) La columna medirá siempre 150px en pantallas pequeñas y 1fr en pantallas grandes.
  • D) La columna tendrá un tamaño estático que anula el diseño responsive.
Respuesta correcta:

B) La función minmax(min, max) establece un tamaño mínimo (150px en este caso) y un máximo, permitiendo que crezca hasta ocupar una fracción del espacio si este está disponible.

4. Para hacer que un elemento ocupe 3 filas en la cuadrícula sin especificar las posiciones exactas de inicio o fin, ¿qué regla CSS debes aplicar?

  • A) grid-template-rows: 3;
  • B) grid-row-end: 3;
  • C) rowspan: 3;
  • D) grid-row: span 3;
Respuesta correcta:

D) La propiedad span se usa dentro de grid-row para indicar cuántas filas debe ocupar un elemento, de forma similar al row-span de las tablas HTML.

5. En un diseño basado en áreas, una vez definida la estructura con grid-template-areas, ¿cómo asignas el elemento aside class="sidebar" a su área correspondiente?

  • A) .sidebar { grid-template-area: sidebar; }
  • B) .sidebar { area-name: sidebar; }
  • C) .sidebar { grid-area: sidebar; }
  • D) .sidebar { place-area: sidebar; }
Respuesta correcta:

C) La propiedad grid-area se utiliza para asignar elementos HTML a cada una de las áreas definidas previamente.

6. Si posicionas un elemento usando la regla grid-column: 2 / 5;, ¿cuántas columnas abarcará visualmente?

  • A) 2 columnas.
  • B) 3 columnas.
  • C) 4 columnas.
  • D) 5 columnas.
Respuesta correcta:

B) En CSS Grid posicionamos basándonos en líneas, no en celdas. Al ir de la línea 2 a la línea 5, el elemento ocupa el espacio de 3 columnas enteras.

7. ¿Qué propiedad alinea los elementos en el eje horizontal dentro de su celda?

  • A) align-items
  • B) justify-content
  • C) align-content
  • D) justify-items
Respuesta correcta:

D) justify-items es la propiedad específica para alinear elementos en el eje horizontal.

8. La propiedad place-items es un atajo (shorthand). ¿Qué dos propiedades combina?

  • A) justify-content y align-content
  • B) grid-column y grid-row
  • C) justify-items y align-items
  • D) place-self y gap
Respuesta correcta:

C) place-items es una propiedad shorthand que combina justify-items (eje horizontal) y align-items (eje vertical).

9. En la declaración grid-template-columns: [start] 1fr [middle] 1fr [end];, ¿para qué sirven los textos entre corchetes?

  • A) Asignan nombres a las líneas para facilitar el posicionamiento de los elementos.
  • B) Definen variables CSS globales.
  • C) Representan los nombres de grid-template-areas.
  • D) Son selectores de clase inyectados en el HTML.
Respuesta correcta:

A) Podemos asignar nombres a las líneas (como [start], [middle], [end]) para facilitar la legibilidad, el mantenimiento del código y el posicionamiento de los elementos.

10. ¿Qué propiedad shorthand nos permite cambiar el espaciado entre filas y columnas simultáneamente?

  • A) padding
  • B) margin
  • C) gap
  • D) space-between
Respuesta correcta:

C) gap es la propiedad shorthand que permite definir el espacio tanto entre filas como entre columnas.

¡Test de CSS Grid Completado!

0/10