I'm unable to override justify-content

Question

I am trying to override justify-content CSS with specificity, but it doesn't seem to work. In my example, I would like for the 2 to be at the top of the div instead of in the center, but for some reason my justify-content:baseline doesn't override the center value.

.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

I think you are confusing justify-content with align-items.

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). https://www.w3schools.com/cssref/css3_pr_justify-content.asp

The align-items property specifies the default alignment for items inside the flexible container. https://www.w3schools.com/cssref/css3_pr_align-items.asp

This is how I think you should use it.

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