Summary  
This chapter explains how to use the CSS justify-content property in a flex container to position and distribute flex items along the horizontal (main) axis using values like flex-start, flex-end, center, space-between, and space-around.

General domain of usage  
Responsive web page and user interface layout

La propriété `justify-content` est essentielle pour déterminer la position des éléments flexibles le long de l’axe principal. Sa valeur par défaut est `flex-start`.
```css
justify-content: flex-start | flex-end | center | space-between | space-around;
```


Examinons chaque cas en pratique. Nous allons manipuler une liste de cartes.

## flex-start
Valeur par défaut, qui place tous les éléments au début de l’axe principal.

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

LmNhcmRzLWxpc3QgewogIGJvcmRlcjogMXB4IHNvbGlkIGxhd25ncmVlbjsKICBkaXNwbGF5OiBmbGV4OwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-end
Tous les éléments sont alignés à l'extrémité de l'axe.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKICBib3JkZXI6IDFweCBzb2xpZCBsYXduZ3JlZW47CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGNhZGV0Ymx1ZTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiA4MHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9uICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## center
Tous les éléments sont centrés.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-around
Répartition uniforme de tous les éléments le long de l’axe principal, avec un espace aux extrémités.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-between
Très similaire à `space-around`, à la différence qu'aucun espace n'est laissé aux extrémités de l'axe.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIGJvcmRlcjogMXB4IHNvbGlkIGxhd25ncmVlbjsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgY2FkZXRibHVlOwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDgwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

Laquelle des valeurs suivantes pour la propriété `justify-content` alignera les éléments flex au centre d’un conteneur flex ?

Maîtrisez les bases de CSS (Cascading Style Sheets), le langage de mise en forme qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées. Idéal pour les débutants souhaitant acquérir une base solide en CSS.

Découvrez ce qu'est CSS, comment le relier à HTML et comment styliser les éléments HTML à l'aide de sélecteurs. Explorez des concepts fondamentaux tels que les couleurs de texte, les pseudo-classes d'action utilisateur et les variables en CSS.

Découvrez comment styliser et formater le texte sur vos pages web. Apprenez à appliquer des polices personnalisées et explorez diverses propriétés de police pour améliorer l'apparence du texte.

Découvrez les principes fondamentaux du modèle de boîte, qui définit la disposition et l'espacement des éléments sur une page web. Explorez des concepts tels que la définition de la taille des boîtes, l'ajout d'espaces aux éléments, la gestion des éléments de type bloc et en ligne, ainsi que l'utilisation des pseudo-classes structurelles et fonctionnelles pour un style avancé.

Découvrez Flexbox, une méthode puissante de mise en page CSS pour organiser les éléments en lignes et en colonnes. Apprenez à contrôler la direction, l’alignement et l’espacement des éléments horizontalement et verticalement, ainsi qu’à personnaliser les éléments flex individuels pour des mises en page précises.

Découvrez comment améliorer l'attrait visuel de vos pages web avec CSS. Explorez des techniques pour appliquer des couleurs et images d'arrière-plan, styliser les images, utiliser des pseudo-éléments décoratifs et ajouter des ombres afin de créer des designs remarquables.

Justification du Contenu Horizontalement avec Flexbox

flex-start

flex-end

center

space-around