Flexbox 在 Chrome 中不工作，在 firefox 中工作 [重复]答案

【问题标题】：Flexbox not working in Chrome, works in firefox [duplicate]Flexbox 在 Chrome 中不工作，在 firefox 中工作 [重复]
【发布时间】：2020-09-14 01:56:24
【问题描述】：

下面是我的 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 相同。

【问题讨论】：

标签： html css google-chrome flexbox

【解决方案1】：

<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

【讨论】：

【解决方案2】：

尝试，

justify-content: flex-end;

这应该适用于两种浏览器。

这是一篇来自 CSS-Tricks 的 flexbox 指南文章： Here

【讨论】：