我无法覆盖justify-content
我无法覆盖justify-content
提问于 2018-06-05 01:32:21
我试图用特异性覆盖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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-05 01:37:10
我认为你混淆了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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50685885
复制相关文章
相似问题