右对齐flex内的按钮

Question

如何将右侧的按钮对齐到右侧(图像中橙色框的右侧)?

[未向右对齐的按钮元素的视觉效果][1][1]: https://i.stack.imgur.com/kAi2y.png

HTML:

<div id="button-container">
<span>
<button
class="btn btn-primary"
type="submit"
>{{lex.labelViewLog}}
</button>
<button
class="btn"
type="button"
>{{lex.reset}}
</button>
</span>
<span>
<button
class="btn btn-icon btn-primary"
[title]="lex.download | titlecase"
type="button">
<cds-icon shape="download"></cds-icon>
<span>{{lex.download}}</span>
</button>
<button
class="btn btn-icon btn-primary"
[title]="lex.print | titlecase"
type="button">
<cds-icon shape="printer"></cds-icon>
<span>{{lex.print}}</span>
</button>
</span>
</div>

CSS:

#button-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

Answer 1

请使用下面的CSS样式:

#button-container{
display: flex;
justify-content: flex-end !important;
}

Answer 2

在<button class="btn btn-icon btn-primary">

中也可以使用flexbox

{
display: flex;
justify-content: flex-end;
align-items: center;
}

Answer 3

问题归结为。btn类。Clarity为按钮增加了0.6rem的右距。我用一个样式(style="margin-right:0")来覆盖CSS:

类来解决这个问题。

<button
class="btn btn-icon btn-primary"
style="margin-right:0"
[title]="lex.print | titlecase"
type="button">
<cds-icon shape="printer"></cds-icon>
<span>{{lex.print}}</span>
</button>