考虑一下这个小提琴：https : //jsfiddle.net/vs9a4toz/
我希望我的按钮位于其div的底部。
我尝试align-self: flex-end在其容器div上使用。但这最终导致该div的内容最终对齐而不是div本身。
.container {
width: 600px;
display: flex;
flex-flow: row;
border: 2px solid red;
}
.box1,
.box2,
.box3 {
width: 100%;
border: 1px solid blue;
display: flex;
flex-flow: column;
size: 100px;
}
.content {
text-align: center;
}
.buttons {
display: flex;
flex-flow: column;
}<div class="container">
<div class="box1">
<div class="content">
<p>HEJ</p>
</div>
<div class="buttons">
<button>ONEONE</button>
<button>TWOTWO</button>
</div>
</div>
<div class="box2">
<div class="content">
<p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
</div>
<div class="buttons">
<button>ONEONE</button>
<button>TWOTWO</button>
</div>
</div>
<div class="box3">
<div class="content">
<p>HEJ</p>
</div>
<div class="buttons">
<button>ONEONE</button>
<button>TWOTWO</button>
</div>
</div>
</div>https://jsfiddle.net/eLuyursq/
.buttons {
display:flex;
flex-flow: column;
margin-top: auto;
}
只需添加 margin-top: auto;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句