Why can I not flexbox certain elements in ReactJS?

Question

I started out trying to style <Link> elements from react-router.

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

but it seems like it strips the display 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)

EDIT: For future reference, as I see this page still gets some views:

I really tried using multiple vendor-specific display CSS attributes, and not just a single flex attribute value, so I realize now that the question is very vague...

The problem is that the ReactJS team changed the way they parse CSS attributes in inline styles, and we "all" really relied on an undocumented (internal) code of ReactJS. So this used to work:

<div style={{'display': ['flex', '-webkit-flex']}}>
    ...
</div>

But this doesn't anymore, since they updated that part of the code.

For further details see e.g. https://github.com/facebook/react/issues/2020

Alejandro · Answer 1 · 2016-07-26T04:11:04.603

i made a codepen that uses react + flexbox

codepen

when using flexbox you will need containers all the time, eg:

<div style={{ display: "flex", flexDirection: "column" }}> ... </div>

Child elements can be container too, eg:

<div style={{ display: "flex", flexDirection: "row" }}> 
    <div style={{ display: "flex", flex:1 }}> 
        <Link />
    </div>
 </div>

notice flex:1 for flexing the child item

check this docs on flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 0 · Answer 2 · answered Jul 25 '16 at 12:28

0

display: 'flex' is a property for a container which then contains the "flex items" - not for a single element as you seem to try to apply it.

answered Jul 25 '16 at 12:28

Johannes

64,305
18
73
130

You can use anchor tags "everywhere" according to the spec, and yes, I'm making a container of elements clickable basically. – Jul 25 '16 at 12:29

score -1 · Accepted Answer · edited May 23 '17 at 11:51

-1

Actually this works for me using React 15.2.0: https://jsfiddle.net/s1mpLk26/

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

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

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

edited May 23 '17 at 11:51

Community

1
1

answered Jul 25 '16 at 12:33

amann

5,449
4
38
46

Umm, it does indeed work for you (i.e. your code works). But not for my project. Of course, the code is found deeper than your example... How do I go about debugging this? – Jul 25 '16 at 13:20
What kind of React component are you applying `style` on? Keep in mind that `style` only works by default if applied on a regular DOM component like ``, `` etc. E.g. if you're using something custom like `Link`, that component should forward `style` to a DOM component it renders. – amann Jul 25 '16 at 13:29
I have some JSX where I just appended (inside the container element) an anchor tag (as in the example I gave in the OP), but then the `display` property is stripped. I know that the JS object that I pass to the `style` attribute in the JSX tag is properly populated. It just doesn't get rendered, somehow... – Jul 25 '16 at 13:32
That's strange indeed. Can you check with the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) if the `` element receives the correct `style` as a prop? – amann Jul 25 '16 at 13:41
Hmm, weird. Indeed in the React tab, I see that `` sets `style={ display: ...` (which I know will just be forwarded to an `` tag by looking at the source of `react-router`), thanks for the tip. – Jul 26 '16 at 06:07
Dies the `` tag receive the style prop with `display` set? You should also be able to check that with the dev tools. – amann Jul 26 '16 at 06:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118282/discussion-between-tobias-and-amann). – Jul 26 '16 at 06:46
Ok, I think we finally got the problem. See my last edit in the answer :). – amann Jul 26 '16 at 08:09

Why can I not flexbox certain elements in ReactJS?

3 Answers3

Linked