Question

我正在尝试使用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更改回列时，子项宽度应恢复为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);

Answer 1

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

Flexbox在chrome和firefox中的不同行为

1 个答案: