使用display：flex時將div右對齊

Question

我有主要股利和2股利。

為了使它們保持同一行，我對所有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> 

這是小提琴： 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> 

Answer 2

 <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# 

試試這個justify-content:space-between