Summary  
This chapter explains the CSS Flexbox `justify-content` property for positioning and distributing flex items along the main (horizontal) axis using values like `flex-start`, `flex-end`, `center`, `space-between`, and `space-around`.  

General domain of usage  
Front-end web development

Властивість `justify-content` відіграє ключову роль у визначенні розташування flex-елементів вздовж головної осі. Її значення за замовчуванням — `flex-start`.
```css
justify-content: flex-start | flex-end | center | space-between | space-around;
```


Розглянемо кожен випадок на практиці. Будемо працювати зі списком карток.

## flex-start
Значення за замовчуванням, яке розміщує всі елементи на початку головної осі.

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

LmNhcmRzLWxpc3QgewogIGJvcmRlcjogMXB4IHNvbGlkIGxhd25ncmVlbjsKICBkaXNwbGF5OiBmbGV4OwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-end
Усі елементи розташовані на кінці осі.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKICBib3JkZXI6IDFweCBzb2xpZCBsYXduZ3JlZW47CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGNhZGV0Ymx1ZTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiA4MHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9uICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## center
Усі елементи розташовані по центру.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-around
Розподіляє всі елементи рівномірно вздовж головної осі з невеликим відступом з обох кінців.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CiAgYm9yZGVyOiAxcHggc29saWQgbGF3bmdyZWVuOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBjYWRldGJsdWU7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogODBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbnMgKi8KdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9

## space-between
Дуже схоже на `space-around`, але не залишає простору по обидва боки осі.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIGJvcmRlcjogMXB4IHNvbGlkIGxhd25ncmVlbjsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgY2FkZXRibHVlOwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDgwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

Яке з наступних значень властивості `justify-content` вирівнює flex-елементи по центру flex-контейнера?

Стилізація веб-сторінок за допомогою CSS. Застосування кольорів, типографіки, відступів і макетів, створення адаптивних компонентів із використанням Flexbox.

Горизонтальне вирівнювання вмісту

flex-start

flex-end

center

space-around

space-between