将按钮组对齐到 div 内的右端

Question

有一个 div 包含一些按钮组。

.main-div {
    display: flex;
    .second-div {
                 //what to write here?
     }
}

<div class="main-div>
    //other divs
    <div class="second-div">
        <div>some button</div>      
        <div>some button</div>
    </div>
</div>

我希望位于此 div 内的按钮组位于该行的右端。

我尝试了多种选择，例如：float: right;、justify-content: end;、margin-right: 0px，但其中 none 具有想要的效果。

有什么想法吗？

Answer 1

使用justify-content: flex-end;

.main{
display:flex;
justify-content: flex-end;
}

<div class="main">
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
</div>

Answer 2

只需将 margin-left: auto; 添加到要右对齐的 flex 元素内的元素即可。

.main-div {
  display: flex;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<div class="main-div" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary" style="margin-left: auto;">Right</button>
</div>

将按钮组对齐到 div 内的右端

Align a button group to the right end within a div

css

less

flexbox