Me considero una persona bastante paciente, y es que para trabajar en desarrollo web es necesario serlo. Sin embargo, debo reconocer que, en más de una ocasión, he estado ahí, moviendo elementos con márgenes, padding y algo de desesperación. Una de las herramientas que me ha ayudado a manejar esta frustración y ajustar los elementos de una forma mucho más sencilla es justify-content en CSS. Te puedo sentir que se siente como encontrar la pieza faltante de un rompecabezas.
Hoy, quiero enseñarte qué es exactamente esta propiedad y cómo puedes usarla en tus proyectos con algunos ejemplos prácticos que te ayudarán a comprenderla. Además, te daré algunos consejos de cómo puedes aprovecharla mejor.
¿Qué es justify-content en CSS?
Justify-content es una propiedad de CSS con la que puedes controlar la alineación y la distribución de los elementos contenedor flexible a lo largo de su eje principal. Como tal, hace parte de las especificaciones de flexbox y grid, dos herramientas que, como hemos mencionado en otras oportunidades, son esenciales para crear diseños modernos y responsivos.
Recordemos que el eje principal depende de la dirección en la que los elementos se distribuyen dentro del contenedor, aunque, por lo general, en flexbox es el eje horizontal, mientras que en grid está determinado por la orientación de las líneas de la cuadrícula. En ese sentido, es como si tuvieras varias cajas en una estantería. Con justify-content, puedes decidir si las cajas se agrupan a la izquierda, la derecha, al centro o si se distribuyen equitativamente.
¿Para qué sirve justify-content?
Como venía diciendo, la propiedad justify-content te permite controlar con mayor facilidad la alineación de los elementos. A continuación, voy a mostrarte algunos de sus principales usos:
- Centrar elementos horizontalmente: Usar esta propiedad te permite alinear todos los elementos hijos en el centro del contenedor a lo largo del eje principal.
- Distribuir elementos de manera uniforme: Hacer esto asegura que el primer elemento se alinee con el inicio del contenedor y el último elemento con el final.
- Controlar el espacio sobrante: Con esta propiedad, puedes alinear los elementos al final del contenedor y dejar todo el espacio sobrante al inicio.
Sintaxis de justify-content
Como tal, la sintaxis de justify-content es bastante simple, ya que sigue esta estructura:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;Valores comunes
Como puedes ver, hay una serie de valores disponibles para esta propiedad. Cada uno de ellos tiene una función diferente. Veámoslo con más detalle:
- flex-start: Los elementos se alinean al inicio del contenedor. Este es el valor que viene configurado por defecto.
- flex-end: Los elementos se alinean al final del contenedor.
- center: Todos los elementos se centran horizontalmente.
- space-between: El espacio sobrante se distribuye entre los elementos, de manera que dejan los extremos vacíos.
- space-around: Los elementos tienen espacio alrededor, pero el de los extremos es más pequeño.
- space-evenly: Distribuye el espacio sobrante de manera equitativa, incluyendo los extremos.
Ejemplos de justify-content
Ahora que hemos visto los elementos de su sintaxis, llegó el momento de la acción. A continuación, te mostraré algunos ejemplos contextualizados de cómo puedes usar esta propiedad:
Centrar elementos en un contenedor
Supongamos que tienes un menú horizontal con botones, y quieres que estén centrados. Puedes hacer lo siguiente:
<div class="menu">
<button>Inicio</button>
<button>Servicios</button>
<button>Contacto</button>
</div>
<style>
.menu {
display: flex;
justify-content: center;
background-color: #f0f0f0;
padding: 10px;
}
button {
margin: 0 5px;
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>Aquí, el valor justify-content: center; se encarga de que los botones se coloquen en el centro del contenedor.
Distribuir espacio con space-between
Ahora, veamos un ejemplo diferente. Imagina que quieres un diseño donde los elementos ocupen toda la fila con un espacio uniforme entre ellos. Puedes hacer esto:
<div class="header">
<div>Logo</div>
<nav>Menú</nav>
<div>Perfil</div>
</div>
<style>
.header {
display: flex;
justify-content: space-between;
background-color: #333;
color: #fff;
padding: 10px 20px;
}
</style>En este ejemplo, al usar justify-content: space-between;, el logo, el menú y el perfil se distribuyen uniformemente en la fila.
Usar space-evenly para crear diseños simétricos
Cuando trabajas con grids o tarjetas, el valor space-evenly puede ser un salvavidas, ya que puedes hacer lo siguiente:
<div class="cards">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
<style>
.cards {
display: flex;
justify-content: space-evenly;
background-color: #fafafa;
padding: 20px;
}
.card {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 5px;
}
</style>De esta manera, las tarjetas están perfectamente espaciadas, incluyendo los extremos.
Diferencias de justify-content con otras propiedades similares
Llegados a este punto, considero necesario que hagamos una pausa para entender en qué se diferencian estas propiedades. Lo primero es que, aunque están relacionadas, cada una tiene un propósito distinto:
| Propiedad | Función |
| justify-content | Se aplica al eje principal, por lo general, el horizontal. |
| justify-items | Se centra exclusivamente en alinear horizontalmente los elementos dentro de sus celdas. |
| align-items | Se encarga de la alineación en el eje cruzado, que suele ser el vertical. |
| align-content | Ajusta el espacio entre líneas cuando hay múltiples filas o columnas |
Aquí puedes ver que hay una diferencia sutil, pero importante entre estas propiedades. Como hemos dicho, justify-content sirve para alinear y distribuir el contenido de una cuadrícula en el eje horizontal. Por su parte, justify-items es la que se encarga de alinear horizontalmente todos los elementos dentro de sus celdas individuales. Ya las propiedades align-items y align-content son más fáciles de distinguir, pues la primera se encarga del eje vertical y la segunda funciona cuando hay múltiples filas o columnas.
Recomendaciones para usar justify-content
Mi último aporte antes de finalizar son estos consejos que puedes tener en cuenta al implementar esta propiedad. Desde mi experiencia, puedo decirte que funcionan bastante bien y que pueden hacer una diferencia en tus proyectos.
- Conoce el layout que necesitas: Los valores no funcionan igual para todos los diseños. Por eso, te recomiendo que planifiques muy bien lo que quieres conseguir y uses el valor adecuado para lograr un buen diseño.
- Combina con otras propiedades: Por ejemplo, puedes usarla junto con align-items para crear alineaciones más complejas.
- Hazlo responsivo: Prueba tus diseños en diferentes tamaños de pantalla para asegurarte de que funcionan bien.
Y listo, ahora sabes que dominar justify-content en CSS te permite tener un control absoluto sobre la alineación horizontal en tus proyectos. Ya sea que quieras centrar los elementos, distribuirlos equitativamente o ajustar el espacio sobrante, lo más importante es que dediques tiempo a practicar hasta ser un experto en la materia.
Puedes continuar aprendiendo sobre los lenguajes y herramientas más demandados en nuestro Bootcamp en Desarrollo Web. Hemos diseñado nuestro programa para que aprendas en poco tiempo a crear proyectos web funcionales, modernos y optimizados. Si tienes pasión y tienes KeepCoding, tienes todo lo que necesitas para transformar tu vida con una nueva carrera en tecnología.
¿Te atreves a dar el primer paso?
