Flexbox en CSS & HTML: Instrucciones para alinear en el eje principal

En este tutorial aprenderás cómo alinear los elementos en un contenedor flex a lo largo del eje principal. Ya hemos cubierto la alineación a lo largo del eje transversal, pero el eje principal también es importante. La tecnología Flexbox te ofrece varias formas de hacer flexible y adaptable la alineación de tus elementos. ¡Veámoslo más de cerca!

Principales conclusiones

• La alineación en el eje principal se realiza con la propiedad justify-content.
• Puedes utilizar diferentes valores como center, flex-start, flex-end, space-between y space-around para ajustar tu diseño.
• La configuración de Flexbox afecta directamente a la disposición de los elementos en la dirección deseada.

Instrucciones paso a paso

1. Inicializar el Flex-Container

Comienza creando un Flex-Container y estableciendo su dirección flexible. En este ejemplo, establecemos la dirección flexible en fila. Esto significa que los elementos se colocarán en una fila de izquierda a derecha.

2. Alineación estándar de los elementos

Si colocas tus elementos en el contenedor sin ajustes de estilo especiales, verás que se alinean de forma predeterminada al principio del contenedor. Puedes darles un ancho de 100 píxeles para ilustrarlos.

3. Alineación centrada

Para centrar los elementos, utiliza la propiedad CSS justify-content con el valor center. Esto alineará tus elementos en el centro del contenedor, lo que resulta en una disposición muy atractiva.

4. Alinear elementos al final

Si deseas alinear tus elementos al final del contenedor, puedes utilizar el valor flex-end para justify-content. Esto moverá los elementos hacia el extremo derecho de tu contenedor.

5. Alinear elementos al inicio

El comportamiento estándar sin ajustes es flex-start, lo que significa que los elementos permanecen al comienzo del contenedor. Esta configuración es útil si deseas una disposición clara y ordenada de los elementos en la parte superior del contenedor.

6. Cambiar la dirección flexible

Al cambiar la dirección flexible a columna, el eje principal pasará de horizontal a vertical. Esto hará que los elementos se coloquen ahora de arriba hacia abajo.

7. Centrar elementos en la alineación vertical

También puedes centrar los elementos en esta nueva alineación utilizando justify-content: center. Esta configuración asegurará que todos los elementos se muestren en el centro del contenedor.

8. Alineación en el extremo inferior

Si deseas tener los elementos en la parte inferior del contenedor, puedes volver a ajustar con flex-end. Esto posicionará los elementos en el borde inferior del contenedor.

9. Uso de propiedades de espacio

Flexbox también te permite controlar el espacio entre tus elementos usando space-between, space-around y space-evenly. Estas propiedades distribuyen el espacio disponible de diferentes maneras.

10. Utilizar space-between

Con justify-content: space-between, el primer elemento permanece en el borde superior y el último elemento en el borde inferior del contenedor, con el espacio entre los elementos distribuido uniformemente.

11. Probar Space-Around

Cuando uses space-around, se creará el mismo espacio alrededor de cada elemento. Esta distancia es visible en el centro del contenedor, mientras los elementos permanecen distribuidos de manera uniforme.

12. Utilizar Space-Evenly

Al utilizar space-evenly se garantiza que haya espacio más uniforme en todas partes entre los elementos y el borde del contenedor.

Resumen

En este tutorial has aprendido cómo puedes configurar la alineación en el eje principal con Flexbox. Mediante el uso de justify-content, puedes diseñar la posición de tus elementos de manera muy flexible. También has conocido diferentes propiedades que te ayudarán a lograr un diseño deseado. ¡Utiliza este conocimiento para crear diseños atractivos y fáciles de usar!