使用 ReactJS 的跨浏览器 flexbox 内联样式答案

【问题标题】：Cross-browser flexbox in-line styling with ReactJS使用 ReactJS 的跨浏览器 flexbox 内联样式
【发布时间】：2016-05-31 05:56:55
【问题描述】：

我正在 React 中构建一个使用内联样式的 Web 应用程序。

我想支持最新版本的主流浏览器（safari、chrome、FF、IE）。我也想用flexbox。

以下样式 var 不适用于所有浏览器：

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

我想我需要在前一个对象中添加类似这样的内容：

{
    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'
}

但是，将其放置在任何地方都会相当费力。是否有任何 polyfill 可以帮助解决这个问题？或者可能会转换代码的东西？

谢谢！

【问题讨论】：

标签： javascript html css reactjs flexbox

【解决方案1】：

一个快速的建议是使用 Radium (http://formidable.com/open-source/radium/)。它还支持自动前缀、媒体查询和伪选择器。

或者，您可以在样式对象周围编写自己的包装器。请记住，您是在 Javascript 和客户端上创建样式的，因此您知道您正在运行什么浏览器，并且应该只能使用所需的前缀。

类似这样的：

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

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

当然，您可以将所有这些放在一个模块中，并在应用之前将需要修改的样式传递给它。我相信 Radium（类似于其他库）在某种意义上做了类似的事情（尽管我认为它们只是输出整个带前缀的 CSS 属性而不是选择）。

【讨论】：