时间戳

首页 > 解决方案 > 我无法覆盖 justify-content

css - 我无法覆盖 justify-content

问题描述

我试图用特异性覆盖 justify-content CSS，但它似乎不起作用。在我的示例中，我希望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>

标签： cssflexboxcss-grid

解决方案

我认为您将 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>

推荐阅读