html - 使用显示 :flex 时将 div 右对齐

Question

我里面有主要的 div 和 2 个 div。

为了让它们保持在同一行，我对所有 div 使用了 display: flex。

但这禁止我在右边的 div 上使用 float:right。

我想要的是将“我的按钮”div移动到屏幕的右侧

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
  <div style="float:left;line-height:30px;">Contact Details</div>
  <button type="button" class="edit_button" style="float: right;">My Button</button>
</div>

这是 fiddle : http://jsfiddle.net/xQgSm/

Answer 1

你只需要使用 flexbox 中可用的对齐属性

.container {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: gray;
  height: 30px;
  display: flex;
  align-items: center; /* center vertically */
  justify-content: space-between; /* maximum space between items*/
}

<div class="container">
  <div>Contact Details</div>

  <button type="button" class="edit_button">My Button</button>

</div>

或者..

.container {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: gray;
  height: 30px;
  display: flex;
  align-items: center;
}

.edit_button {
  margin-left: auto;
  /* align to right */
}

<div class="container">
  <div>Contact Details</div>

  <button type="button" class="edit_button">My Button</button>

</div>