我可以使用CSS flexbox强制包装所有项目吗？

Question

我有三个块元素,我正在使用CSS Flexbox进行布局.(在我的例子中,它们恰好<select>s是<div>ider元素两边的两个;我正在构建一个List Builder控件.)

我想要的是:

• 使中间(分隔符)元素占用尽可能少的空间.
• 要使两端的元素(即:选择控件)具有最小宽度,并增长以填充可能的空间.
• 当容器中有足够的水平空间时,将所有三个元素放在一行上(例如:浏览器宽度)
• 当没有足够的水平空间将它们全部水平放置时,让所有元素垂直包裹.

除了上一个要求之外,Flexbox在所有这些方面做得非常出色.如果没有足够的空间将所有元素放在一行上,我就无法强制所有元素进行换行.

我正在使用相当简单的flexbox设置来实现布局:

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

select {
    flex-basis: 10em;
    flex-grow: 1;
}

.divider {
    flex-basis: 3em;
    flex-grow: 0;
    text-align: center;
}

这样做的问题是,如果容器宽度设置为足够宽的一个选择加分隔符的任何数量,它将包装结束选择,但不包括分隔符.我会在一行上得到一个选择加一个分频器,看起来很难看.

这个小提琴说明了这个问题:

http://jsfiddle.net/5s0yf74w/1/

是否可以通过调整CSS同时保留一般的flexbox布局来实现我想要的结果？

Answer 1

我认为如果没有基于 JS 的迭代布局逻辑（你知道，让浏览器渲染、计算宽度并有条件地添加/删除类），你想要的就不可能实现。然而，我认为这个小提琴中给出的解决方案是一个明智的 CSS 唯一方法。基本上有两种布局，一种是宽布局，我只做了一项更改，flex-wrap: nowrap;以防止出现您所描述的并非所有三个元素都被包装的令人讨厌的情况。窄的一个将 flex-direction 覆盖为flex-direction: column;。通过应用适当的媒体查询和 sane 可以轻松切换两者min-width。