为什么我不能在 ReactJS 中 flexbox 某些元素？

IT技术 css reactjs flexbox
2021-05-06 07:48:52

我开始尝试<Link>从react-router.

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

但它似乎display专门剥离了CSS 属性。有谁知道为什么以及如何解决它？

我遇到了同样的问题

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

（结果：仅margin-top: 10px适用）

编辑： 为了将来参考，我看到这个页面仍然有一些观点：

我真的尝试使用多个特定display于供应商的CSS 属性，而不仅仅是单个flex属性值，所以我现在意识到这个问题非常模糊......

问题是 ReactJS 团队改变了他们解析内联样式中 CSS 属性的方式，我们“都”真正依赖于未记录的（内部）ReactJS 代码。所以这曾经有效：

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

但这不再是了，因为他们更新了那部分代码。

有关更多详细信息，请参见例如https://github.com/facebook/react/issues/2020

3个回答

我制作了一个使用 react + flexbox 的 codepen

代码笔

使用 flexbox 时，您将一直需要容器，例如：

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

子元素也可以是容器，例如： 

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

flex:1弯曲子项的通知

在 flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/上查看此文档

display: 'flex'是一个容器的属性，然后包含“弹性项目”——而不是像你试图应用它的单个元素。

实际上这对我使用 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')
);

也许你的版本已经过时了？

编辑： 问题是由供应商前缀引起的：

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

第一个问题是，给定的值display不起作用。而是：

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

但是这也不起作用，因为display对象中有重复的键。

显然 React 不支持在这个问题中提到的值的供应商前缀。链接的答案提到 Radium 使您能够使用带有内联样式的供应商前缀。另一种选择是使用好的 ol' CSS。

顺便提一句。该-webkit-前缀通常是没有必要了，如图所示我可以用表。但是，如果您支持 IE10 或 IE11，您可能需要像 Autoprefixer 这样的东西来为您处理供应商前缀，因为它们对于 flexbox 来说有些复杂（语法在 2012 年发生了变化，IE 仍然需要旧语法）。

其它你可能感兴趣的问题
上一篇如何处理Promise链中的多个错误？ 下一篇你如何在 Netlify 上发布带有 gatsby-image 的 gatsby 项目？