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 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 between css 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.
Ahora que sabes cómo funciona la propiedad justify-content de Flexbox y flex between, ¡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!
