我想将第二行放在容器的中心,但我不知道该怎么做。 align-self
仅在水平方向上有效 - 即使 flex-direction
设置为“column”。
.first, .second {
height: 50px;
width: 100%;
}
.first {
background-color: wheat;
}
.second {
align-self: center;
background-color: purple;
}
.container {
background-color: silver;
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="container">
<div class="first">
first
</div>
<div class="second">
second
</div>
</div>
最佳答案
很难看出实际发生了什么,因为 .first
和 .second
的宽度设置为 100%。如果将它们设为 50x50 正方形,您可以看到 align-self 在父容器的横轴上工作,因此在本例中它使 .second
水平居中。
一个可行的解决方案是在 .second 中嵌套另一个 flexbox,如下所示:https://jsfiddle.net/Lygdk4xo/
关于css - Flexbox - 第二行垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52433117/