Cómo ubicar dos columnas con Flexbox

| Última modificación: 25 de octubre de 2024 | Tiempo de Lectura: 4 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

¿Sabes cómo ubicar dos columnas con Flexbox? Acá te contamos.

Añadir filas en una página web es casi automático, basta con crear otro elemento o seguir escribiendo para que avancemos en nuestro diseño en vertical. Sin embargo, hay muchas ocasiones en las que también queremos crear y dividir espacios horizontales. Por ello, en este post te enseñaremos cómo ubicar dos columnas con Flexbox, un sistema de disposición de elementos en CSS relativamente nuevo.

¿Por qué ubicar dos columnas con Flexbox?

Hay muchos casos en los que querremos ubicar dos columnas. Puede que queramos una imagen a la izquierda con un texto a la derecha o que nuestras secciones en el footer estén ubicadas horizontalmente. La lógica de columnas con flexbox hace que crear dos o más columnas sea muy sencillo, porque podemos cambiar la dirección en la que se ordenan nuestros elementos HTML de forma sencilla.

Recuerda que el posicionamiento avanzado con Flexbox es un sistema de disposición de elementos que consta de un contenedor que tiene elementos HTML dentro. Ese contenedor tiene dos ejes basados en las dos dimensiones de la pantalla. El contenedor tiene, por tanto, un eje principal y un eje transversal o secundario. En Flexbox no hablamos de ejes x o y, ya que podemos hacer que cualquiera de estos dos sea el eje principal gracias a la propiedad flex-direction.

Te recomendamos leer nuestro post sobre la propiedad flex-direction de Flexbox, pues esta será nuestra herramienta principal para crear columnas en una página web. Recuerda que la opción row es el valor por defecto y ordena los elementos de izquierda a derecha, mientras que row-reverse los ordena de derecha a izquierda. De forma similar, la opción column ordena los elementos de arriba abajo y la opción column-reverse los ordena de abajo arriba.

¿Cómo ubicar dos columnas con Flexbox?

Para ubicar dos columnas con Flexbox basta con crear un contenedor para cada columna que quieras y luego aplicar la propiedad display:flex. Entonces, pensemos que queremos crear dos columnas para el footer, una con la sección de enlaces relevantes y otra con la sección de redes. Para hacer esto, creamos dos elementos div dentro de nuestro elemento footer, cada uno con los elementos de cada sección. Luego le aplicamos la propiedad display: flex al elemento footer usando su selector de clase, ID o tipo. Como el valor por defecto de la dirección de columnas con flexbox es row, los elementos se ordenarán de izquierda a derecha automáticamente y crearán nuestras columnas.

Una vez tengas tus dos columnas flexbox definidas, puedes jugar con su alineación usando la propiedad justify-content o align-items. Puede que al crear tus dos columnas, una sea claramente más grande que la otra y esto sea un problema. Para hacer que las dos columnas crezcan o se encojan para ocupar siempre el mismo espacio, primero debemos seleccionarlas. Puedes hacer esto con un selector de tipo si ambas columnas son el mismo tipo de elemento dentro del contenedor o añadiendo un atributo de clase con el mismo nombre a ambas columnas flexbox.

¡Recuerda que hay muchas maneras de seleccionar un elemento! Si tienes dudas sobre este tema, te recomendamos revisar nuestros posts sobre los selectores básicos y los selectores múltiples en CSS.

Con las columnas seleccionadas, les insertamos la propiedad flex:1. Ten en cuenta que esta propiedad es una abreviatura de flex-grow, flex-shrink y flex-basis. Sin embargo, como solo estamos poniendo un valor, estamos usándola para determinar el valor flex-grow. Al tener ambas columnas seleccionadas, le estamos diciendo al navegador que crezcan para tener una proporción 1:1. Para generar un espacio o brecha entre las columnas, te recomendamos revisar la propiedad gap en la MDN o leer nuestro post sobre las propiedades de espaciados en Flexbox.

Otra ocasión en la que puedes querer dos columnas en tu página web es en los momentos en los que la pantalla del usuario es muy ancha, haciendo que los textos se vuelvan largos y las imágenes se agranden infinitamente. Puede que tu página a una columna funcione en dispositivos móviles, pero cuando las pantallas son muy anchas es mejor dividir nuestro espacio horizontal para mejorar su legibilidad.

Hacer que nuestra página web se adapte a las características de los dispositivos en los que los usuarios la ven se llama diseño responsive y es una gran forma de mejorar la experiencia de usuario. Te invitamos a leer el siguiente post si quieres saber cómo hacer que tu página web pase de una columna a dos usando las media queries en CSS.

¿Te animas a seguir aprendiendo?

Ahora que sabes mucho más sobre cómo ubicar dos columnas con Flexbox, darles un tamaño y volverlas parte del diseño responsive de un sitio web, ¡ha llegado el momento de implementar estos conocimientos en el diseño de tu propia página web! En KeepCoding creemos firmemente que la mejor forma de aprender es mezclando la teoría con la práctica, por ello, te invitamos a que te animes a seguir aprendiendo con nosotros en el Desarrollo Web Full Stack Bootcamp.

En nuestro bootcamp seguirás aprendiendo, entre muchas otras cosas, acerca de los lenguajes de programación para el desarrollo web. Durante el transcurso del programa usarás este aprendizaje para crear y diseñar tu propia página web con ayuda de nuestros profesores. ¿A qué esperas para inscribirte y convertirte en un experto? ¡No te pierdas esta oportunidad!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado