如何对嵌套在父DIV中的两个子DIV进行底部对齐

Question

父DIV嵌套2个子DIV:box2 box3，它们垂直堆叠，box2底部与box3顶部对齐box3底部与box1底部对齐

CSS应该如何编写？

代码段：

.box1 {
width: 315px;
height: 300px;
background-color: #FFF;
}
.box2 {
width: 315px;
height: 48px;
background-color: #000;
}
.box3 {
width: 315px;
height: 38px;
background-color: #000;
}

<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>

Answer 1

您可以使用flex布局中的flex-end。

.box1 {
width: 315px;
height: 300px;
background-color: #FFF;
display: flex;
flex-direction: column;
justify-content: flex-end;
}