---
id: 587d78ac367417b2b2512af6
title: Вирівнювання елементів за допомогою властивості justify-content
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
forumTopicId: 301102
dashedName: align-elements-using-the-justify-content-property
---

# --description--

Деколи flex елементи не заповнюють все вільне місце у flex контейнері. Зазвичай, можна вказати CSS, як саме варто вирівняти та розтягнути flex елементи. На щастя, властивість `justify-content` має декілька варіантів для цього. По-перше, перед тим як їх розглядати, варто вивчити важливу термінологію.

[Це зображення рядка ілюструє подальші поняття та може стати у пригоді.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)

Пам'ятайте, що якщо ви налаштуєте flex контейнер у вигляді рядка, flex елементи послідовно розташовуватимуться зліва направо. Встановлення flex контейнера у вигляді стовпця розташує flex елементи вертикально зверху вниз. Для обох цих налаштувань, напрямок, у якому розташовуються flex елементи, має назву **main axis**. У рядку це — горизонтальна лінія, що перетинає кожен елемент. А у стовпці головна вісь — це вертикальна лінія, що проходить через всі елементи.

Існує декілька способів розміщення flex елементів уздовж лінії, тобто головної осі. Найпоширеніший — це `justify-content: center;`, що вирівнює всі flex елементи по центру всередині flex контейнера. Інші варіанти:

<ul><li><code>flex-start</code>: розміщення елементів від початку flex контейнера. Елементи у рядку посуваються до лівого боку контейнера. А у стовпці елементи вирівнюються зверху контейнера. Це вирівнювання використовується за замовчуванням, якщо не вказано <code>justify-content</code>.</li><li><code>flex-end</code>: вирівнювання елементів від кінця flex контейнера. У рядку елементи переміщуються до правого боку контейнера. А у стовпці — до нижньої частини контейнера.</li><li><code>space-between</code>: вирівнювання елементів по центру головної осі, залишаючи додатковий простір між елементами. Перший та останній елементи відштовхуються на самий край flex контейнера. Наприклад, у рядку перший елемент стає з лівого боку контейнера, останній — з правого боку, а інші елементи рівномірно розподіляються серед місця, що залишилося між ними.</li><li><code>space-around</code>: подібне значення до <code>space-between</code>, але перший та останній елементи не фіксуються навпроти країв контейнера, а вільне місце розподіляється поміж всіх елементів, залишаючи половину простору з будь-якого краю flex контейнера.</li><li><code>space-evenly</code>: рівномірно розподіляє вільне місце між flex елементами з цілим пробілом з будь-якого краю flex контейнера</li></ul>

# --instructions--

Приклад допоможе показати цю властивість у дії. Додайте властивість CSS `justify-content` до елемента `#box-container`та надайте йому значення `center`.

**Бонус**  
Спробуйте інші варіанти властивості `justify-content` у редакторі коду, щоб побачити їхні відмінності. Проте майте на увазі, що лише значення `center` може виконати це завдання.

# --hints--

Елемент `#box-container` повинен мати налаштовану властивість `justify-content` до значення `center`.

```js
assert($('#box-container').css('justify-content') == 'center');
```

# --seed--

## --seed-contents--

```html
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
```

# --solutions--

```html
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content: center;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
```