Why can I not flexbox certain elements in ReactJS?

问题

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

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

回答2:

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.

回答3:

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/

来源：https://stackoverflow.com/questions/38567716/why-can-i-not-flexbox-certain-elements-in-reactjs

标签

css

reactjs

flexbox