小编Guy*_*ron的帖子

我有一个固定宽度的容器,其中几个可变宽度元素必须出现在一行中,必要时可以将其溢出到其他行中.

但是,每个元素的开头必须与它上面的元素对齐,所以在ASCII艺术中它看起来像是这样(比如,填充1):

    /----------------------------------\
    |                                  |
    | # One    # Two   # Three  # Four |
    | # Five   # Six                   |
    |                                  |
    \----------------------------------/

换一种说法:

• 每行的第一个元素必须左对齐
• 每行的最后一个元素(最后一行除外)必须是右对齐的
• 每个元素必须与其上方的元素左对齐

我试图使用flexbox而没有成功.

这是我到目前为止最好的,flex-wrap: wrap用于容器和flex-grow: 1元素.

问题是最后一行填充到边缘.

justify-content: flex-start; // this does nothing

如果我拿走flow-grow: 1那么元素不会平均分配.我也尝试摆弄last-of-type元素,但这还不够.

这是否可能flexbox,或者我是以错误的方式进行的？

我正在使用react-bootstrap的ModalTrigger来显示一个字段繁重的模态(基于react-bootstrap的模态),这意味着向它发送一堆道具:

<ModalTrigger modal={<MyModal field1={value1} field2={value2} (more fields...)/>}>
    Click here to open
</ModalTrigger>

创建触发器的父组件具有通过道具传入的字段/值和的父组件的是组件已经它作为道具传递中,通过实际保存数据的顶层组件.两者基本上都是管道,这是一个经典的childContext场景,除了它不起作用.这是我尝试过的简化版本:

var MyModal = React.createClass({
    contextTypes : {foo : React.PropTypes.string},
    render : function() {
        return (
            <Modal {...this.props} title="MyTitle">
                <div className="modal-body">
                    The context is {this.context.foo}
                </div>
            </Modal>
        );
    }
});

var Content = React.createClass({
    childContextTypes : {foo: React.PropTypes.string},
    getChildContext : function() {return {foo : "bar"}},
    render : function() {
        return (
            <ModalTrigger modal={<MyModal/>}>
                <span>Show modal</span>
            </ModalTrigger>
        )
    }
});

模态弹出"上下文是",没有显示实际上下文.

我相信这种情况正在发生,因为发送给ModalTrigger的道具已经以某种方式呈现/装载,但我不确定为什么.据我所知,MyModal的所有者是Content组件,这意味着上下文应该没问题,但事实并非如此.

一些更多的信息:我已经尝试过通过{...this.props}并context={this.context}没有成功MyModal.另外,也许相关,ModalTrigger使用cloneElement来确保模态的onRequestHide …