如何在弹性容器中右对齐按钮？

Question

我不知道如何向右浮动按钮，我希望有人可以帮助我。

黄色显示 div 的背景。div 的宽度设置为 50%。

.faq {
  width: 100%;
  padding: 12px 20px;
  display: block;
  box-sizing: border-box;
  width: 50%;
  margin: auto;
  margin-top: 30px;
}

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  background-color: yellow;
}

.save {
  float: right;
  background-color: red;
}

<div class="outerDiv">
  <h2>New FAQ</h2>
  <input type="text" class="faq">
  <br>
  <button class="save" mat-raised-button color="primary">Primary</button>
</div>

我究竟做错了什么？

Answer 1

浮动在弹性容器中不起作用

改用align-self:flex-end​

.faq {
  padding: 12px 20px;
  display: block;
  box-sizing: border-box;
  width: 50%;
  margin: auto;
  margin-top: 30px;
}

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;

  background-color: yellow;
}

.save {
   align-self:flex-end;
  background-color: red;
}

<div class="outerDiv">
    <h2>New FAQ</h2>
    <input type="text" class="faq">
    <br>
    <button class="save" mat-raised-button color="primary">Primary</button>
</div>