Question

我尝试实现一个垂直的项目列表，它们将它们包装在溢出上，并生成一个可水平滚动的列表。我想用flexbox来实现这个目标。

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

    <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解决方案。

提前谢谢你亚历

Answer 1

如果您在20版之前查看Firefox，那么您就不走运了。这些FF遵循2009年的规范，控制包装的属性称为box-lines（单个|多个）。只有麻烦，他们从未实现过：https://bugzilla.mozilla.org/show_bug.cgi?id=562073

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

Mozilla flexbox行为与webkit不同，即

1 个答案: