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

我有三个块元素,我正在使用CSS Flexbox进行布局.(在我的例子中,它们恰好s是

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布局来实现我想要的结果？

• css
• css3
• select
• ide
• list
• build
• 容器
• io
• text

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册