Cuando usamos Flexbox en CSS, lo primero que debemos entender es que hay dos elementos clave:
- El contenedor flex: Es el elemento padre que organiza sus elementos hijos con Flexbox.
- Los elementos flexibles: Son los elementos hijos dentro del contenedor, que se comportan según las reglas de Flexbox.
En esta lección, veremos cómo convertir un elemento en un contenedor flex y cómo cambiar la dirección en la que se organizan sus elementos hijos.
Hacer un contenedor flex
Para activar Flexbox en un elemento, usamos la propiedad display con el valor flex.
¿Cómo se comporta el contenedor?
- Un
display: flex;hace que los elementos hijos se alineen automáticamente en una fila. - El contenedor sigue comportándose como un bloque normal, ocupando todo el ancho disponible.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
¿Y si quiero que el contenedor sea en línea?
Si en lugar de display: flex; usamos display: inline-flex;, el contenedor solo ocupará el espacio necesario, en lugar de todo el ancho disponible. Esto es útil cuando queremos que los elementos se ubiquen junto a otros elementos en la misma línea.
Cambiar la dirección del contenedor
Por defecto, los elementos dentro de un contenedor flex se alinean en una fila (de izquierda a derecha). Sin embargo, podemos cambiar esta dirección con la propiedad flex-direction.
Valores de flex-direction
| Valor | Descripción |
|---|---|
row (predeterminado) |
Los elementos se organizan en fila, de izquierda a derecha. |
row-reverse |
Igual que row, pero invierte el orden. |
column |
Los elementos se organizan en columna, de arriba hacia abajo. |
column-reverse |
Igual que column, pero invierte el orden. |
Ejemplo con flex-direction: column;:
.contenedor {
display: flex;
flex-direction: column;
}
Aquí puedes verlo con más detalle:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Al cambiar a flex-direction: column;, el eje principal se vuelve vertical en lugar de horizontal.
¿Y qué pasa si usamos column-reverse?
Los elementos seguirán en columna, pero el orden será invertido:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Prueba con row-reverse para ver cómo afecta la disposición horizontal:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Resumen
display: flex;convierte un elemento en un contenedor flex, organizando sus hijos en fila por defecto.display: inline-flex;hace lo mismo, pero el contenedor ocupa solo el espacio necesario.flex-directionpermite cambiar la dirección en la que se organizan los elementos flexibles.row: Fila normal (izquierda a derecha).row-reverse: Fila en orden inverso.column: Columna normal (de arriba hacia abajo).column-reverse: Columna en orden inverso.
Materiales adicionales
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.
