Не работает justify-content: center, но работает margin: 0 auto

Question

Почему в примере ниже не работает для выравнивания justify-content: center, а работает margin: 0 auto. Когда какой использовать?

.fed-form {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 0 auto;
  margin-top: 30px;
  justify-content: center;
}

<div class="consultation">

  <div class="container">
    <h2 class="title title_left">
      Получите бесплатную консультацию <br>по подбору пульсометра
    </h2>
    <div class="consultation__descr">
      Просто заполните форму заявки<br> и мы вам перезвоним в течении 10 минут
    </div>
    <form class="fed-form" action="#">
      <input name=" name" required placeholder="Ваше имя" type="text">
      <input name=" phone" required placeholder="Ваш телефон" type="number">
      <input name=" E-mail" required placeholder="Ваш E-mail" type="email">
      <!-- <input type="submit" value="Заказать консультацию" > -->
      <button class="button button_submit">Заказать консультацию</button>

    </form>
  </div>
</div>

Answer 1

justify-content как бы в своём название намекает, что свойство распространяется только на содержимое блока и выравнивает он по горизонтали, при условии, что flex-direction: row.
В связке с flex-direction: column; для выравнивания по горизонтали нужно использовать aligh-items, justify-content будет использоваться для выравнивания по вертикали.

В то время как margin это внешний отступ и если блоку установить жёсткий размер и margin: 0 auto (что означает margin-left: auto; margin-right: auto;), то блок будет с одинаковыми отступами слева и справа, относительно своего родителя (если размер самого блока и родителя не будет одинаковый, иначе отступ будет равен нулю).

Когда какой использовать?

Если выравнивать блоки нужно горизонтально по центру:

Используйте align-items: center:

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: red;
}

.child {
  display: block;
  height: 30px;
  background: blue;
}

.child:not(:last-child) {
  margin-bottom: 10px;
}

<div class="parent">
  <div class="child" style="width: 100px"></div>
  <div class="child" style="width: 200px"></div>
  <div class="child" style="width: 150px"></div>
</div>

Или же через margin: 0 auto, но задать его нужно для дочерних блоков:

.parent {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: red;
}

.child {
  display: block;
  height: 30px;
  background: blue;
  margin: 0 auto;
}

.child:not(:last-child) {
  margin-bottom: 10px;
}

<div class="parent">
  <div class="child" style="width: 100px"></div>
  <div class="child" style="width: 200px"></div>
  <div class="child" style="width: 150px"></div>
</div>

Если же сам блок выровнять, то нежно использовать ту же логику, что описал выше, только "выше уровнем вложения".

БЛОГ НА HUSL

Не работает justify-content: center, но работает margin: 0 auto

Ответы (1 шт):