The justify-content property in Flexbox is used to align and distribute flexible items along the main axis of the Flex container. This is especially useful for controlling how the items are distributed when you have extra space in the container.

Values of justify-content

1. flex-start (default): Items are aligned at the start of the main axis.
2. flex-end: Items are aligned at the end of the main axis.
3. center: Items are centered along the main axis.
4. space-between: Items are distributed with the maximum possible space between them.
5. space-around: Items are distributed with equal space around them.
6. space-evenly: Items are distributed with equal space between them and the edges of the container. (This property is more recently supported and might not be supported in all browsers.)

Using justify-content

The justify-content property is applied to the Flex container to control the arrangement of its child items along the main axis. Here are examples of how you can use each of these values.

justify-content: flex-start

css

html

[Placeholder: Imagen que muestra los elementos flex alineados al inicio del contenedor]

justify-content: flex-end

css

html

[Placeholder: Imagen que muestra los elementos flex alineados al final del contenedor]

justify-content: center

css

html

[Placeholder: Imagen que muestra los elementos flex centrados en el contenedor]

justify-content: space-between

css

html

[Placeholder: Imagen que muestra los elementos flex con el mayor espacio posible entre ellos]

justify-content: space-around

css

html

[Placeholder: Imagen que muestra los elementos flex con espacio igual alrededor de ellos]

justify-content: space-evenly

css

html

[Placeholder: Imagen que muestra los elementos flex con espacio igual entre y alrededor de ellos]

Complete Example

This example demonstrates how the justify-content property affects the arrangement of flexible items within a container.

html

[Placeholder: Imagen que muestra el ejemplo completo con justify-content: space-around aplicado, distribuyendo los elementos con espacio igual a su alrededor]

Summary

• flex-start: Items are aligned at the start of the main axis.
• flex-end: Items are aligned at the end of the main axis.
• center: Items are centered along the main axis.
• space-between: Maximum possible space between items.
• space-around: Equal space around each item.
• space-evenly: Equal space between and around items.

Proper use of justify-content will allow you to control the arrangement and alignment of flexible items within a container, creating visually appealing and well-organized layouts.