Summary  
This chapter explains how the CSS justify-content property in a Flexbox container controls horizontal distribution and alignment of flex items using values like flex-start, flex-end, center, space-between, and space-around.

General domain of usage  
Front-end web layout and responsive UI design

La propiedad `justify-content` es fundamental para determinar la posición de los elementos flexibles a lo largo del eje principal. Su valor predeterminado es `flex-start`.
```css
justify-content: flex-start | flex-end | center | space-between | space-around;
```


Analicemos cada caso en la práctica. Utilizaremos una lista de tarjetas.

## flex-start
Valor predeterminado, que coloca todos los elementos al inicio del eje principal.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0iY2FyZHMtbGlzdCI+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvam9rZXIucG5nIgogICAgICAgICAgYWx0PSJKb2tlciIKICAgICAgICAgIHdpZHRoPSI2NHB4IgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBUaGUgSm9rZXIgaXMgQmF0bWFuJ3MgaWNvbmljIHN1cGVydmlsbGFpbiBrbm93biBmb3IgaGlzIGNoYW90aWMgYW5kCiAgICAgICAgICBzYWRpc3RpYyBiZWhhdmlvciBhbmQgZGlzZmlndXJlZCBjbG93biBhcHBlYXJhbmNlLgogICAgICAgIDwvcD4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJjYXJkIj4KICAgICAgICA8aW1nCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9hbGllbi5wbmciCiAgICAgICAgICBhbHQ9IkFsaWVuIgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIEFuIGFsaWVuIGlzIGEgYmVpbmcgZnJvbSBhIHBsYW5ldCBvdGhlciB0aGFuIEVhcnRoLCBvZnRlbiBkZXBpY3RlZCBhcwogICAgICAgICAgaGF2aW5nIGV4dHJhdGVycmVzdHJpYWwgZmVhdHVyZXMgYW5kIGFkdmFuY2VkIHRlY2hub2xvZ3kuCiAgICAgICAgPC9wPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9ImNhcmQiPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2Nsb3duLnBuZyIKICAgICAgICAgIGFsdD0iQ2xvd24iCiAgICAgICAgICB3aWR0aD0iNjRweCIKICAgICAgICAvPgogICAgICAgIDxwPgogICAgICAgICAgQSBjbG93biBpcyBhIGNvbWljIHBlcmZvcm1lciBrbm93biBmb3IgdGhlaXIgZGlzdGluY3RpdmUgbWFrZXVwLAogICAgICAgICAgY29sb3JmdWwgY29zdHVtZXMsIGFuZCBhbXVzaW5nIGFudGljcywgb2Z0ZW4gc2VlbiBhdCBjaXJjdXNlcyBhbmQKICAgICAgICAgIGNoaWxkcmVuJ3MgcGFydGllcy4KICAgICAgICA8L3A+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdG95LW1vdXNlLnBuZyIKICAgICAgICAgIGFsdD0iVG95IG1vdXNlIgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIEEgdG95IG1vdXNlIGlzIGEgc21hbGwgcGxheXRoaW5nIHNoYXBlZCBsaWtlIGEgbW91c2UsIHVzdWFsbHkgbWFkZSBvZgogICAgICAgICAgZmFicmljLCBwbGFzdGljLCBvciBydWJiZXIsIGZvciBlbnRlcnRhaW5tZW50IG9yIHBldCBpbnRlcmFjdGlvbi4KICAgICAgICA8L3A+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvZ2hvc3QucG5nIgogICAgICAgICAgYWx0PSJHaG9zdCIKICAgICAgICAgIHdpZHRoPSI2NHB4IgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBBIGdob3N0IGlzIGEgc3VwZXJuYXR1cmFsIGVudGl0eSBvciBzcGlyaXQgb2YgYSBkZWNlYXNlZCBwZXJzb24sIG9mdGVuCiAgICAgICAgICBkZXBpY3RlZCBhcyB0cmFuc2x1Y2VudCwgaW50YW5naWJsZSwgYW5kIGhhdW50aW5nIGEgc3BlY2lmaWMgbG9jYXRpb24uCiAgICAgICAgPC9wPgogICAgICA8L2xpPgogICAgPC91bD4KICA8L2JvZHk+CjwvaHRtbD4=

LmNhcmRzLWxpc3QgewogIGJvcmRlcjogMXB4IHNvbGlkIGxhd25ncmVlbjsKICBkaXNwbGF5OiBmbGV4OwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-end
Todos los elementos se encuentran al final del eje.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKICBib3JkZXI6IDFweCBzb2xpZCBsYXduZ3JlZW47CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGNhZGV0Ymx1ZTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiA4MHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9uICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## center
Todos los elementos están en el centro.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-around
Distribuye todos los elementos de manera uniforme a lo largo del eje principal, dejando un poco de espacio en cada extremo.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-between
Es muy similar a `space-around`, excepto que no deja ningún espacio en los extremos del eje.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIGJvcmRlcjogMXB4IHNvbGlkIGxhd25ncmVlbjsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgY2FkZXRibHVlOwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDgwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

¿Cuál de los siguientes valores para la propiedad `justify-content` alineará los elementos flex en el centro de un contenedor flex?

Domina los conceptos esenciales de CSS (Cascading Style Sheets), el lenguaje de estilos que transforma la apariencia de las páginas web. Explora conceptos clave como estilos de texto, colores, espaciado, el modelo de caja, Flexbox y efectos decorativos. Desarrolla las habilidades necesarias para crear páginas web visualmente atractivas y bien estructuradas. Ideal para principiantes que buscan establecer una base sólida en CSS.

Aprenda qué es CSS, cómo conectarlo con HTML y cómo aplicar estilos a los elementos HTML utilizando selectores. Explore conceptos fundamentales como colores de texto, pseudo-clases de acción del usuario y variables en CSS.

Descubra cómo estilizar y formatear texto en sus páginas web. Aprenda a aplicar fuentes personalizadas y explore diversas propiedades de fuente para mejorar la apariencia del texto.

Aprenda los fundamentos del modelo de caja, que define la disposición y el espaciado de los elementos en una página web. Explore conceptos como el dimensionamiento de cajas, la adición de espacio a los elementos, el trabajo con elementos de bloque e inline, y el uso de pseudoclases estructurales y funcionales para estilos avanzados.

Descubra Flexbox, un potente método de diseño en CSS para organizar elementos en filas y columnas. Aprenda a controlar la dirección, alineación y espaciado de los elementos tanto horizontal como verticalmente, así como a personalizar elementos flex individuales para lograr diseños precisos.

Aprenda a mejorar el atractivo visual de sus páginas web con CSS. Explore técnicas para aplicar colores y fondos de imagen, estilizar imágenes, utilizar pseudo-elementos decorativos y agregar sombras para crear diseños impactantes.

Justificación del Contenido Horizontalmente en Flexbox

flex-start

flex-end

center

space-around