Display:flex en CSS: Cómo lograr la alineación perfecta

Sé de buena mano que, cuando empezamos a diseñar sitios web, una de las cosas que más pueden estresarnos es tratar de alinear los elementos correctamente. En mi experiencia como desarrollador y como profesor, sé que a menudo nos asaltan dudas como “¿Cómo puedo asegurarme de que los elementos se alineen, tanto vertical como horizontalmente, y que además se vean bien diferentes dispositivos y resoluciones?” o “¿Cómo puedo lograr que los botones se distribuyan equitativamente en este espacio?”. Ciertamente, nadie nace experto, pero puedo decirte que, después de muchos intentos y errores, aprender a utilizar display:flex en CSS me simplificó la vida como desarrollador. Así que, si estás buscando una solución práctica para mejorar tus diseños, sigue leyendo porque este artículo está hecho para ti.

¿Qué es display:flex en CSS?

Display:flex es una propiedad de CSS que nos permite diseñar interfaces web y manejar la disposición de los elementos de un contenedor, al habilitar el modelo de caja flexible que conocemos como flexbox. Cuando la aplicamos a un contenedor, este organiza automáticamente sus elementos hijos en una fila o columna, ajustándolos para que encajen lo más perfecto posible, incluso si tienen tamaños diferentes.

Básicamente, nos permite alinear y distribuir más fácilmente el espacio entre los elementos, por lo que es muy útil si queremos crear diseños responsivos que se adapten a los diferentes dispositivos y tamaños de pantalla sin tener que recurrir a técnicas más complicadas. Esto se debe a que, al aplicar display:flex, podemos hacer uso de las propiedades adicionales de flexbox para controlar la disposición y alineación de los elementos, como justify-content, align-items, flex-direction, entre otras. 

¿Para qué sirve display:flex?

Veamos con un poco más de detalle los principales usos de esta propiedad:

1. Alinear elementos horizontal o verticalmente: Te da la posibilidad de alinear los elementos de manera simple en cualquier dirección al usar propiedades como justify-content, para el eje principal, y align-items, para el eje transversal.
2. Crear diseños responsivos sin tener que hacer cálculos complejos: Usar Flexbox facilita la creación de diseños que se adaptan automáticamente a diferentes tamaños de pantalla, lo que elimina la necesidad de calcular manualmente los anchos y márgenes. 
3. Distribuir espacios de manera uniforme entre elementos: Este sistema también te permite distribuir fácilmente el espacio entre y alrededor de los elementos usando propiedades como justify-content: space-between o justify-content: space-around.

Por ejemplo, display:flex puede serte de mucha ayuda si necesitas centrar un texto dentro de un botón o alinear los elementos en un menú.

Sintaxis básica de display:flex

La sintaxis para utilizar display:flex es muy sencilla. Te lo mostraré con un ejemplo básico:

.container {
  display: flex;
}

Esta simple línea convierte al contenedor en un contenedor flexible, y todos los elementos dentro de él se distribuyen automáticamente en una fila. Pero, ya te digo. El verdadero poder de flexbox está en las propiedades adicionales que puedes usar para personalizar su comportamiento.

Propiedades que puedes combinar con display:flex

Vamos a ver un poco más de cerca las propiedades que también puedes utilizar:

1. Flex-direction: Define la dirección de los elementos, según los valores row (el que viene por defecto) o column.
2. Justify-content: Controla cómo se distribuyen los elementos en el eje principal, que puede ser horizontal o vertical según la dirección. Algunos de sus valores comunes son center, space-between, space-around.
3. Align-items: Alinea los elementos en el eje perpendicular, usando valores como center, stretch, flex-start.
4. flex-wrap: Permite que los elementos se ajusten a múltiples filas si no caben en una sola. Para esto, usa valores como nowrap (el que viene por defecto) o wrap.

Ejemplos de display:flex

Ahora, te mostraré un par de ejemplos de lo que puedes hacer utilizando esta propiedad.

Centrar un elemento

Imagina que necesitas centrar un cuadro dentro de una página, tanto horizontal como verticalmente. ¿Cómo lo harías? Ya te digo que, sin flexbox, esto podría ser un dolor de cabeza. Pero con la propiedad display:flex, es realmente sencillo:

HTML

<div class="container">
  <div class="box">Centrado</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Ocupar toda la altura de la ventana */
}

.box {
  background-color: #4caf50;
  padding: 20px;
  color: white;
}

Como resultado, tendremos un cuadro perfectamente centrado y sin mucho esfuerzo.

Distribuir elementos en un menú

Display:flex también es una propiedad muy utilizada para alinear los elementos en un menú de navegación. Esto es algo que podrías hacer de la siguiente manera:

HTML

<nav class="menu">
  <a href="#">Inicio</a>
  <a href="#">Sobre mí</a>
  <a href="#">Contacto</a>
</nav>

.menu {
  display: flex;
  justify-content: space-between; /* Espacios iguales entre los enlaces */
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px;
}

Lo que hace este código es crear un menú simple donde los enlaces se distribuyen uniformemente.

Consejos para trabajar con display:flex

Tras años de trabajar como desarrollador, he aprendido algunos trucos que me han ayudado a sacar el máximo provecho de display:flex. Aquí te dejo mis mejores recomendaciones:

1. Usa herramientas visuales: Si estás comenzando, utilizar herramientas como Flexbox Froggy puede ayudarte a entender cómo funcionan las propiedades de flexbox de manera interactiva.
2. Combina con otras propiedades de CSS: Flexbox es bastante potente, pero a menudo necesitarás combinarlo con márgenes, paddings o incluso grid para lograr diseños más complejos. Por eso, te aconsejo que te familiarices también con estas herramientas.
3. Planifica antes de codificar: Antes de comenzar, diseña un boceto o wireframe para visualizar cómo deseas distribuir los elementos. Créeme, esto te ahorrará tiempo y frustraciones.

Como has visto, aprender a manejar display:flex en CSS es bastante útil, pero siendo sinceros, esto es solo el inicio de todo lo que puedes lograr como desarrollador web. 

Si quieres continuar aprendiendo y mejorando tus habilidades como desarrollador, el Bootcamp en Desarrollo Web de KeepCoding es el cambio que necesitas. Hemos diseñado nuestro programa para que, en cuestión de meses, puedas convertirte en un experto en herramientas altamente demandadas como CSS, HTML, JavaScript y React. Empieza ahora una carrera en uno de los sectores con mejores salarios, estabilidad laboral y crecientes oportunidades.