将div右下方的div对齐

Question

如何将底部多个div对齐，一个在另一个上。如下图所示。

Answer 1

您可以使用Flexbox执行此操作

1. 将flex-direction: column设置为将div放在另一个
之上
2. align-items: flex-end将div移到父级的右侧
3. justify-content: flex-end将div移至父母的底部。
＆＃13;
＆＃13;
.parent {
  height: 300px;
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;

}
.box {
  width: 100px;
  height: 50px;
  margin: 5px;
  border: 1px solid black;
}
＆＃13;
<div class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

更新：要反转div的顺序，您可以使用flex-direction: column-reverse和justify-content: flex-start

＆＃13;
＆＃13;
.parent {
  height: 300px;
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: flex-start;

}
.box {
  width: 100px;
  height: 50px;
  margin: 5px;
  border: 1px solid black;
}
＆＃13;
<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以将flexbox与flex-direction配合使用：column-reverse;和flex-wrap: wrap-reverse;：

＆＃13;

＆＃13;

.x {
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap-reverse;
    border: 1px solid red;
    flex-grow: 0;
    flex-basis: 0%;
  }
  .y {
    width: 80px;
    height: 80px;
    border: 1px solid green;
    margin: 3px;
  }

＆＃13;

<div class="x">
  <div class="y">1</div>
  <div class="y">2</div>
  <div class="y">3</div>
  <div class="y">4</div>
  <div class="y">5</div>
</div>

＆＃13;

＆＃13;

＆＃13;