Cross-browser Flexbox In-line Styling With ReactJS

- 1 answer

I'm building a web app in React which uses in-line styling.

I want to support major browsers of the latest versions (safari, chrome, FF, IE). I also want to use flexbox.

The following style var, doesn't work in all browsers:

var ContainerStyle = {
  display: 'flex',
  flexDirection: 'row',
  flex: '1 1 auto',
  backgroundColor: '#EFEFEF',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center'

I guess I need to add something like this to the previous object:

    display: '-webkit-flex',
    display: '-moz-flex',
    display: '-ms-flex',
    display: '-o-flex',
    display: 'flex',
    -webkit-flex-direction: 'row',
    -moz-flex-direction: 'row',
    -ms-flex-direction: 'row',
    -o-flex-direction: 'row',
    flex-direction: 'row'

However, this is going to be rather laborious to put everywhere. Are there any polyfills that can help with this? Or perhaps something that will transpile the code?




A quick suggestion would be to use Radium ( It has support for auto-prefixing, for media queries and pseudo-selectors as well.

Alternatively, you can write your own wrapper around your style object. Keep in mind that you are creating your styles in Javascript and on the client, so you know what browser you are running on and you should be able to use only the prefix you need.

Something like this:

var ContainerStyle = {
  display: (browser.webkit) ? '-webkit-flex' : 'flex',
  //flexDirection: 'row', not here!

// but here:
if (browser.webkit) {
    ContainerStyle.WebkitFlexDirection = 'row'

Of course you can put all this in a module and pass it the style that needs mangling before applying. I believe Radium (similarly to other libraries) does something similar in a sense (although I think they just output the whole prefixed CSS properties rather than selecting).