如何让div在容器div的底部对齐

Question

考虑这个小提琴: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>

Answer 1

https://jsfiddle.net/eLuyursq/

.buttons {
  display:flex;
  flex-flow: column;
  margin-top: auto;
}

只需添加 margin-top: auto;