Propiedad justify-content de Flexbox

Autor: | Última modificación: 20 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

Flexbox es un sistema de disposición de elementos que apareció en la esfera del desarrollo web en 2009. Aunque es relativamente nuevo, este sistema ha probado ser igual o más potente que otros sistemas de posicionamiento clásico. En este post, te presentaremos una de las propiedades que realmente facilitan nuestro día a día: la propiedad justify-content de Flexbox, ya que, en Flexbox, hay propiedades que simplemente nos dan otra manera de posicionar elementos, mientras que otras nos cambian la vida.

¿Cómo funciona Flexbox?

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 al uso de la propiedad flex-direction. Con ella, definimos si los elementos se ordenarán de izquierda a derecha (row), de derecha a izquierda (row-reverse), de arriba abajo (column) o de abajo arriba (column-reverse). Esta propiedad es esencial para comprender la lógica de todas las otras propiedades de Flexbox.

Recuerda que siempre que quieras insertar una propiedad de Flexbox en tu elemento HTML, primero necesitas definirle la propiedad display:flex. De este modo, el navegador entenderá que quieres que este elemento se ubique siguiendo las reglas de Flexbox.

¿Cómo funciona la propiedad justify-content de Flexbox?

La propiedad justify-content de Flexbox nos va a permitir definir cómo se deben alinear los elementos o flex-items que están dentro del contenedor flex. Esta propiedad define la alineación con respecto al eje principal, sea el automático (row) o el definido en flex-direction. Podemos alinear nuestros elementos de seis maneras distintas usando esta propiedad:

  • flex-start: los elementos se alinearán al inicio del eje principal. En el caso de row, esto sería a la izquierda.
  • flex-end: los elementos se alinearán al centro del eje principal. Si la propiedad flex-direction está en row, se alinearán a la derecha.
  • center: los elementos se alinearán al centro del eje principal.
  • space-between: los elementos repartirán el espacio sobrante de su contenedor de manera equitativa entre ellos. Esto quiere decir que los elementos a los bordes serán empujados a cada extremo y el espacios se repartirá en medio de los elementos.
  • space-around: los elementos repartirán el espacio sobrante de su contenedor de manera equitativa a sus alrededores, creando un espacio también a los bordes.
  • space-evenly: los elementos se repartirán el espacio sobrante de su contenedor de igual manera a todos sus costados. Es decir que habrá el mismo espacio al inicio y al final que en el medio de los elementos.

Si quieres saber más sobre cómo funcionan estas alineaciones, te invitamos a leer esta guía completa de Flexbox, donde encontrarás un diagrama para cada opción de la propiedad justify-content de Flexbox. Además, encontrarás un resumen de su metodología y de cada una de sus propiedades.

Y ahora, ¿qué sigue?

Ahora que sabes cómo funciona la propiedad justify-content de Flexbox, ¡es el momento de que la pongas en práctica en tu propia página web! En KeepCoding sabemos que un cerebro como el tuyo no se queda solo con leer sobre un par de propiedades, ¡quiere ejecutarlas! Por ello, te invitamos a nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. Allí, además de continuar aprendiendo acerca de los lenguajes de programación del desarrollo web, crearás y diseñarás tu propia página web con ayuda de nuestros profesores. ¿A qué esperas para inscribirte a la combinación perfecta de teoría y práctica? ¡No te lo pierdas!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!