Flexbox无法在Chrome中运行，但可以在Firefox中运行

Question

所以下面是我的flexbox（以红色突出显示）在Firefox中的外观的图片。这里的行为是预期的。

代码（vue html，也使用bootstrap-vue组件）：

<div style="display: flex; background-color: red; justify-content: right;">
 <b-button class="mb-2" style="position: relative; right: 40px;"  size="sm" variant="danger" v-if="forceSyncMode" @click="applyForceSync()">Apply All</b-button>
 <b-button class="mb-2" style="position: relative; right: 23px;" size="sm" v-if="forceSyncMode" variant="secondary" @click="selectAllForceSync()">Select All</b-button>
 <b-button class="mb-2" style="position: relative; right: 5px;" size="sm" v-if="forceSyncMode" variant="secondary" @click="deselectAllForceSync()">Deselect All</b-button>
</div>

现在，在谷歌浏览器中就这样显示

这可能只是一个菜鸟的错误，但是我真的不知道为什么flex box可以在Firefox而不是Chrome上运行。这是怎么回事？

注意：我尚未检查IE或Opera。

编辑1：我在IE中签入，其结果与chrome相同。

Answer 1

尝试，

justify-content: flex-end;

这应该在两种浏览器中都可以使用。

这是CSS-Tricks的flexbox指南的文章： Here

Answer 2

<div style="display: flex; background-color: red; justify-content:flex-end;">
 <b-button class="mb-2" style="position: relative; right: 40px;"  size="sm" variant="danger" v-if="forceSyncMode" @click="applyForceSync()">Apply All</b-button>
 <b-button class="mb-2" style="position: relative; right: 23px;" size="sm" v-if="forceSyncMode" variant="secondary" @click="selectAllForceSync()">Select All</b-button>
 <b-button class="mb-2" style="position: relative; right: 5px;" size="sm" v-if="forceSyncMode" variant="secondary" @click="deselectAllForceSync()">Deselect All</b-button>
</div>

也许您应该像这样使用它

justify-content