底部对齐父 div 内的 2 个 div（同时将一个子 div 保持在另一个子元素之上）答案

【问题标题】：Bottom align 2 divs inside parent div (while keeping one child div on top of another child)底部对齐父 div 内的 2 个 div（同时将一个子 div 保持在另一个子元素之上）
【发布时间】：2020-07-07 17:23:41
【问题描述】：

我有 3 个 div：

<div class="parent"> 
  <div class="child1"> </div>
  <div class="child2"> </div>
</div>

CSS：

.parent {
  height: 500px;
  width: 500px;
  position: relative;
}

.child1, .child2 {
  height: 100px;
  width: 100px;
}

我需要将child2 div 对齐到.parent div 的底部，而child1 div 应该在child2 div 的顶部。

因此，child1 和 child2 都应与父 div 底部对齐，但 child1 应位于 child2 之上。

我怎样才能做到这一点？如果只有一个子 div - 可以通过设置 position: absolute; bottom:0 来实现，但我无法确定是否有 2 个子 div，并且一个子 div 应该在另一个之上。

【问题讨论】：

标签： html css sass flexbox

【解决方案1】：

您可以在 .parent 上使用 Flexbox 并应用以下样式：

.parent {
  /* Introduce Flexbox */
  display: flex;

  /* Establishes the y-axis as the main axis.
     This displays the children from top to bottom */
  flex-direction: column;

  /* Packs the children from the end of the main axis */
  justify-content: flex-end;
}

.parent {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid black;
}

.child1,
.child2 {
  height: 100px;
  width: 100px;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

<div class="parent">
  <div class="child1"> </div>
  <div class="child2"> </div>
</div>

【讨论】：