Tobias Tobias - 5 months ago 19
CSS Question

Why can I not flexbox certain elements in ReactJS?

I started out trying to style

elements from

<Link style={{display: 'flex'}}>...</Link>

but it seems like it strips the
CSS property specifically.
Does anyone know why and how to fix it?

I get the same problems with

<a style={{display: 'flex', marginTop: '10px'}}>Test link</a>

(Result: Only
margin-top: 10px
is applied)


It indeed works with a shallow test, as seen in one of the answers, but it is not working for me where the code is more nested. How can I go about debugging the issue?

It seems that the props are correctly sent to the
element by looking in the React Developer Tools in Chrome. But when I look in the Elements tab, I don't see
display: flex

Finally, I can reproduce the issue. It seems to be a problem with multiple values (in
at least)


Actually this works for me using React 15.2.0:

var Hello = React.createClass({
  render: function() {
    return <a style={{display: 'flex', marginTop: '10px'}}>Test link</a>;

  <Hello name="World" />,

Maybe your version is outdated?

EDIT: The issue is caused by the vendor prefixes:

{display: 'flex; display: -webkit-box', marginTop: '10px'}

The first issue with this is, that the given value for display doesn't work. It would rather be:

{display: 'flex', display: '-webkit-box', …}

This however also doesn't work, because of the duplicate display key in the object.

Apparently React doesn't support vendor prefixes for values as mention in this question. The linked answer mentions that Radium enables you to use vendor prefixes with inline styles. The other option is to go with good ol' CSS.

Btw. the -webkit- prefix is usually not necessary anymore, as shown in the Can i use table. However if you support IE10 or IE11 you'll probably want something like Autoprefixer handle the vendor prefixes for you, as they're somewhat complicated for flexbox (the syntax changed 2012 and the old syntax is still necessary for IEs).