0

So below is a picture of what my flexbox (highlighted in red) looks like in Firefox. Here the behavior is as intended.

Code (vue html, also using bootstrap-vue components): 

<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>

enter image description here Now in google chrome it appears as such

enter image description here

This is probably just a rookie mistake, but I really can't figure out why the flex box would work on Firefox but not Chrome. What is going on here?

Note: I haven't checked IE or Opera yet.

Edit 1: I Checked in IE and it has the same result as chrome.

samargy_
  • 33
  • 1
  • 6

2 Answers2

0

Try to,

justify-content: flex-end;

this should work in both browsers.

Here is an article of the flexbox guide from CSS-Tricks: Here

Avishka Dambawinna
  • 1,180
  • 1
  • 13
  • 29
gumbiWambo
  • 1
0
<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>

may be u should use it like this

justify-content

chenc
  • 331
  • 1
  • 5