freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

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

--description--

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

Це зображення рядка ілюструє подальші поняття та може стати у пригоді.

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

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

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

--instructions--

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

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

--hints--

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

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

--seed--

--seed-contents--

<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--

<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>