css - 我无法覆盖 justify-content

Question

我试图用特殊性覆盖 justify-content CSS，但它似乎不起作用。在我的示例中，我希望 2 位于 div 的顶部而不是中心，但出于某种原因，我的 justify-content:baseline 没有t 覆盖 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>