Question

我有主div和2个div。

为了让它们保持在同一行，我对所有div使用return this.http.get(environment.baseUrl + '/' + window.name + '/myController/') .map(res => res.json());。

但这禁止我在正确的div上使用display: flex。

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

float:right

这是小提琴： http://jsfiddle.net/xQgSm/

Answer 1

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

＆＃13;

.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*/
}

＆＃13;

<div class="container">
  <div>Contact Details</div>

  <button type="button" class="edit_button">My Button</button>

</div>

＆＃13;

可替换地..

＆＃13;

.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 */
}

＆＃13;

<div class="container">
  <div>Contact Details</div>

  <button type="button" class="edit_button">My Button</button>

</div>

＆＃13;

Answer 2

＆＃13;

<div style="display:flex;justify-content:space-between;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="">My Button</button>

</div>https://stackoverflow.com/questions/45881495/align-div-to-the-right-while-using-displayflex#

＆＃13;

试试这个justify-content:space-between

使用display：flex时将div对齐

2 个答案: