- ¿Qué es Flexbox?
- Creando un contenedor flexible
- Regla importante: ya no necesitamos float
- ¿Cuándo usar Flexbox?
Cuando diseñamos una web con CSS, los elementos siguen el orden del HTML, pero a veces necesitamos una distribución más flexible. Antes, usábamos float o position, pero eran soluciones complicadas.
Flexbox simplifica el diseño al permitirnos alinear y distribuir elementos de manera eficiente en cualquier dirección.
¿Qué es Flexbox?
Como puedes ver, en Flexbox los elementos se organizan en dos ejes:
- Eje principal (
x): es la línea en la que los elementos se alinean por defecto. Generalmente es horizontal, pero puede cambiarse. - Eje transversal (
y): es perpendicular al eje principal.
A diferencia de métodos más antiguos, con Flexbox podemos alinear, espaciar y distribuir los elementos de forma más intuitiva y sin necesidad de usar float o márgenes complicados.
Creando un contenedor flexible
Para usar Flexbox, el primer paso es definir un contenedor flexible. Esto se hace aplicando display: flex al contenedor que va a organizar los elementos internos.
¿Qué sucede aquí?
display: flexconvierte a.contenedoren un contenedor flexible.- Sus elementos internos (
.elemento) se alinean automáticamente en el eje x sin necesidad de usarfloatniinline-block. - Los elementos siempre tratan de ocupar sólo el espacio necesario y permanecen en una sola línea a menos que indiquemos lo contrario.
Regla importante: ya no necesitamos float
Antes, cuando usábamos float, muchas veces teníamos que agregar clear para evitar problemas con la disposición de otros elementos. Ahora, Flexbox maneja estos casos de forma automática.
Sin embargo, al trabajar con Flexbox, algunas propiedades que quizás usabas antes ya no funcionarán dentro del contenedor flexible, por ejemplo:
| Propiedad CSS | ¿Funciona en flexbox? |
|---|---|
float |
❌ No funciona |
clear |
❌ No funciona |
vertical-align |
❌ No funciona (se usa otra forma más sencilla) |
En lugar de depender de estas propiedades, Flexbox nos ofrece otras herramientas más potentes que veremos en las siguientes lecciones.
¿Cuándo usar Flexbox?
Flexbox es ideal cuando necesitamos:
✅ Crear diseños flexibles y adaptativos sin escribir demasiado código.
✅ Centrar elementos de manera sencilla (¡sin trucos complicados!).
✅ Distribuir elementos equitativamente sin calcular márgenes manualmente.
✅ Hacer que los elementos respondan dinámicamente al tamaño del contenedor.
✅ Fijar un pie de página en la parte inferior sin importar la altura de la página.
Resumen
- Flexbox nos ayuda a organizar elementos de manera más flexible y sin necesidad de
floatoposition. - Un contenedor flexible se crea con
display: flex, organizando sus elementos en un eje principal y un eje transversal. - Propiedades como
floatycleardejan de funcionar dentro de un contenedor flexible. - Flexbox es ideal para crear diseños adaptables, alinear elementos y distribuir espacios eficientemente.
En la próxima lección veremos más detalles sobre cómo controlar la dirección y el alineamiento de los elementos dentro de Flexbox.
Materiales adicionales
¿Dudas sobre la lección? Pregunta en el chat del grupo
Te responderán tu mentor o tus compañeros.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
