如何在另一个使用弹性盒的底部对齐div？

Question

我需要将橙色按钮对齐蓝色底部.使用我当前的弹性代码,我无法得到想要的结果.任何想法如何解决它？谢谢

.content {
  width: 350px;
  height: 150px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.row1 {
  background-color: red;
}

.row2 {
  background-color: blue;
  height: 100px
}

.icon {
  width: 50px;
  height: 50px;
  background-color: orange;
  align-items: center;
  justify-content: center;
}

<div class="content">
  <div class="row1">
  </div>
  <div class="row2">
    <div class="icon">

    </div>
  </div>
</div>

Answer 1

您还需要设置display: flex上row2,然后就可以使用align-self: flex-end橙色的元素.

.content {
  width: 350px;
  height: 150px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.row1 {
  background-color: red;
}
.row2 {
  background-color: blue;
  display: flex;
  height: 100px
}
.icon {
  width: 50px;
  height: 50px;
  background-color: orange;
  align-self: flex-end;
}

<div class="content">
  <div class="row1"></div>
  
  <div class="row2">
    <div class="icon"></div>
  </div>
</div>