Question

我有一个有2列的flexbox容器。当没有空间显示它们时，我希望列堆叠。我使用以下html / css

<div class="container">
    <div class="column">
        <div>Short content</div>
        <div>This is some longer content to show problem</div>
        <div>Short contetn</div>
    </div>
    <div class="column">
        <div>Short content</div>
        <div>This is some longer content to show problem</div>
        <div>Short contetn</div>
    </div>
</div>

和

.container {
    display: flex;
    flex-wrap: wrap;
}
.column {
    flex: 1 0 auto;
    /* grow, don't shrink */
}

JS在这里小提琴：http://jsfiddle.net/AsdNS/

似乎内部div上有隐式white-space: nowrap，但我不希望这样。如果我确实想要它肯定我会在我的CSS中指定它。有没有办法不包装空格，如果没有空格的单个文本块太大，那么只包装列？

在实践中，我想强制它包装一些空格，而不是其他空格（我将使用<span> s）

编辑这是一个更真实的jsfiddle：http://jsfiddle.net/W7g3U/1/

我想要的是长div包装，但短div不是。

编辑2 以下是我想要实现的内容（适用于Chrome）http://plnkr.co/edit/Ppoe8xJrrbC16Y1vyWCD

flex-shrink：0和white-space：wrap

0 个答案: