将按钮组与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但他们都没有想要的效果.

有任何想法吗？

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>