css - ionic 图标的右对齐

Question

我想右对齐 ionic 图标，默认情况下它们出现在左侧。我怎样才能做到这一点？谁能帮帮我？

<div class="bar bar-footer no-line ">
    <i class="icon ion-ios-navigate-outline icon"></i>
    <i class="icon ion-document-text icon "></i>
</div>

Answer 1

这是因为 .bar 根据 ionic.css
有一个 display:flex 属性所以 justify-content: flex-end; 应该适合你。

请注意我添加到 bar-footer 的 flex-right 类。

请参阅以下代码段:

.flex-right {
  justify-content: flex-end;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css" rel="stylesheet" />
<div class="bar bar-footer no-line flex-right">
  <i class="icon ion-ios-navigate-outline icon"></i>
  <i class="icon ion-document-text icon"></i>
</div>