Я не могу переопределить justify-content

Question

Я пытаюсь переопределить CSS-код justify с учетом специфики, но, похоже, он не работает.В моем примере я бы хотел, чтобы 2 находился наверху элемента div, а не в центре, но по какой-то причине мой justify-content:baseline не перекрывает значение center.

.flex-container {
  display:grid;
}
  .flex-container div {
    display:flex;
    height:50px;
    justify-content:center;
  }
  .flex-container div.baseline {
    justify-content:baseline;
  }

<div class="flex-container">
  <div>1</div>
  <div class="baseline">2</div>
  <div>3</div>
</div>

Answer 1

Я думаю, что вы путаете justify-content с align-items.

Свойство justify-content выравнивает элементы гибкого контейнера, когда элементы не используют все доступное пространство на главной оси (по горизонтали).https://www.w3schools.com/cssref/css3_pr_justify-content.asp

Свойство align-items указывает выравнивание по умолчанию для элементов внутри гибкого контейнера.https://www.w3schools.com/cssref/css3_pr_align-items.asp

Вот как я думаю, вы должны его использовать.

.flex-container {
  display:grid;
}
  .flex-container div {
    display:flex;
    height:50px;
    align-items:center;
    justify-content: center;
  }
  .flex-container div.baseline {
    align-items:flex-start;
  }

<div class="flex-container">
  <div>1</div>
  <div class="baseline">2</div>
  <div>3</div>
</div>