align-self 的文档状态:
The align-self CSS property aligns flex items of the current flex line overriding the align-items value.
然而，这不会发生:
.example {
display: flex;
align-items: center;
border: 1px solid blue;
height: 8ex;
}
.example > div {
border: 1px solid red;
}
#a > div:last-child {
align-self: top;
}
#b > div:last-child {
align-self: center;
}
#c > div:last-child {
align-self: bottom;
}<body>
<div id="a" class="example"><div>1</div><div>2</div></div>
<div id="b" class="example"><div>1</div><div>2</div></div>
<div id="c" class="example"><div>1</div><div>2</div></div>
</body>文档还说:
If any of the item's cross-axis margin is set to auto, then align-self is ignored. The property doesn't apply to block-level boxes, or to table cells.
但是，这些都不起作用:
- 向子
div显式添加margin:0。 - 将
display:inline添加到子div。 - 将
div更改为span。
为什么 align-self 不起作用？
最佳答案
top 和 bottom 不是 align-self 的有效值。使用 flex-start 和 flex-end 代替:
.example {
display: flex;
align-items: center;
border: 1px solid blue;
height: 8ex;
}
.example > div {
border: 1px solid red;
}
#a > div:last-child {
align-self: flex-start;
}
#b > div:last-child {
align-self: center;
}
#c > div:last-child {
align-self: flex-end;
}<body>
<div id="a" class="example"><div>1</div><div>2</div></div>
<div id="b" class="example"><div>1</div><div>2</div></div>
<div id="c" class="example"><div>1</div><div>2</div></div>
</body>关于html - Flexbox align-self 被忽略，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44396753/