Flexbox 在 chrome 和 firefox 中的不同行为答案

【问题标题】：Different behaviour of Flexbox in chrome and firefoxFlexbox 在 chrome 和 firefox 中的不同行为
【发布时间】：2014-10-24 09:05:58
【问题描述】：

我正在尝试使用 Flexbox 和 React 构建具有动态布局的网页。当 flex-direction 从列切换到行并返回到列时，flex 项的宽度在 chrome 中没有像预期的那样反映。

我创建了一个 jsfiddle 来解释这个问题

http://jsfiddle.net/kirana/u44fjqdj/4/（Reactjs 版本）

http://jsfiddle.net/kirana/vm9jcr1t/2/（Jquery 版）

在上面的 jsfiddle 示例中，Flex 容器的宽度为 400px，四个子 flex 项的宽度为 400px，从上到下流动。当 flex-direction 更改为 row 时，子项宽度减小到 100px 以适应行。当 flex-direction 改回 column 时，子项的宽度应该恢复为 400px，但在 Chrome 中宽度保持在 100px，并且在 firefox 中按预期工作；

如何解决这个问题？

var FlexItem = React.createClass({
    render: function () {
        var itemStyle = {
            width: 400,
            height: 100,
            border: '1px solid red',
        };
        return React.DOM.div({
            style: itemStyle
        }, 'some text');
    }
});

var FlexContainer = React.createClass({
    getInitialState: function () {
        return {
            direction: 'column'
        };
    },
    toggle: function () {
        this.setState({
            direction: (this.state.direction === 'row') ? 'column' : 'row'
        });
    },
    render: function () {
        var containerStyle = {
            display: '-moz-flex',
            display: '-webkit-flex',
            display: 'flex',
            MozFlexDirection: this.state.direction,
            WebkitFlexDirection: this.state.direction,
            flexDirection: this.state.direction,
            width: 400,
            border: '1px solid green',
        };

        var container = React.DOM.div({
            style: containerStyle
        }, FlexItem(), FlexItem(), FlexItem(), FlexItem());

        var button = React.DOM.button({
            onClick: this.toggle,
            className: 'button'
        }, 'Toggle');

        return React.DOM.div({}, button, container);
    }
});

React.renderComponent(FlexContainer(), document.body);

【问题讨论】：

我相信你通常会使用 flexbox 来让孩子以某种方式填充容器，所以你可以在容器上设置大小并使用flex孩子们的风格。 Example
Brandon，在一些复杂的布局情况下，我们可能需要设置弹性项目的宽度。我创建了这个场景来展示我面临的跨浏览器问题。

标签： jquery flexbox reactjs

【解决方案1】：

似乎这根本不是 React 或 jQuery 的问题。您似乎遇到了 Chrome 中的错误。您应该确保它不在 Canary 中并在 https://code.google.com/p/chromium/issues/list 上查找/归档。

【讨论】：