0

我尝试实现一个垂直的项目列表，它在溢出时将它们包装起来并产生一个水平滚动的列表。我想使用 flexbox 来实现这一点。

Webkit 和 IE 产生预期的输出。不是那么火狐。请看这个例子：

JSFIDDLE 示例

    <div class="listbox flex-direction-vertical flex-wrap">
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div>
  </div>

BODY 
{
    counter-reset: listitem; /* Create an item counter scope */
}
.content:before {
    content: "item " counter(listitem) ". ";
    counter-increment: listitem;  /* Add 1 to listitem */
}
.listbox
{
    height: 400px;
    width:600px;
    background-color:lightgray;
    overflow:auto;

    /* old syntax */
    display: -webkit-box;
    display: -moz-box;

    /* new syntax */
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -moz-flexbox;
    display: -o-flex; 
    display: -ms-flex;
    display: -ms-flexbox; 
    display: flexbox;
    display: flex; 
}
.flex-direction-vertical
{
    /* old syntax */
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -moz-box-align:start;
    -moz-box-pack:start;

    /* new syntax */
    -webkit-flex-direction:column;
    -moz-flex-direction:column; 
    -o-flex-direction:column; 
    -ms-flex-direction:column; 
    flex-direction:column;

}
.flex-wrap
{
    /* old syntax */
    -webkit-box-wrap: wrap;
    -moz-box-wrap: wrap;

    /* new syntax */
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap; 
    -o-flex-wrap:wrap; 
    -ms-flex-wrap:wrap; 
    flex-wrap:wrap;
}
.listitem
{
    background-color:green;
    border: 2px solid red;
    height:100px;
    width:200px;
}
.content
{
    background-color:gray;
}

请帮我找到 Firefox 的解决方案。

提前谢谢你亚历克斯

4

1 回答 1

1

如果您正在查看版本 20 之前的 Firefox，那么您就不走运了。这些 FF 遵循 2009 年的规范，控制包装的属性称为box-lines(single|multiple)。唯一的麻烦是，他们从未实现过它： https ://bugzilla.mozilla.org/show_bug.cgi?id=562073

好消息是，从版本 20 开始，FF 将遵循 2012 年 9 月的规范。我没有关注他们的进展，但 caniuse 在这些版本中将其标记为完全“支持”，而不仅仅是“部分支持”。

于 2013-02-21T18:43:52.523 回答