使用Javascript的Metro水平滚动容器

在使用WinJS/javascript的metro应用程序中，是否有一种实现水平滚动效果的标准方法

假设我动态添加了多个div，具有可变的宽度/高度，并且当内容溢出时，我希望屏幕水平滚动，我将如何实现这一点

我不希望在滚动包装器上使用固定宽度的overflow-x:scroll

<section class="header">
    Header which is always shown in top left corner
</section>
<section class="magic-winjs-scroll-container-class">
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
</section>

您需要使用“Flexbox”。这将为您提供所需的一切：

此外，还有一个动手实验室，可为不同选项生成交互式CSS：

具体来说，您将希望它按行排列。您仍然需要overflow:auto，使其允许您自动显示滚动条

在这之后，就要调整flexbox，使其按照您的喜好进行布局

注意，如果这是针对大量数据，您可能需要考虑使用ListVIEW，它以完全不同的方式实现这一点，但是允许数据和UI虚拟化。

---

谢谢你！我会检查一下，然后再给你回复。你有使用flexbox的代码示例（css）吗？是的，MSDN链接为不同的场景提供了示例。我还添加了一个指向“动手”交互页面的链接，帮助您可视化不同的选项，并生成所需的CSS。请注意，动手示例使用了-ms-box，但在WinJS中，它是-ms-flexbox。作为记录，MSFT帮助和关于这类难以置信的基本内容的指导是可怕的。想弄明白这件事真是浪费时间。

.magic-winjs-scroll-container-class {
     display: -ms-flexbox;
     -ms-flex-direction: row;
     -ms-flex-align: center;
 }