使用 flexbox 在 ng-repeat 中压缩项目 - angular.js/flexbox

Question

如果使用 flexbox 使用 ng-repeat 填充内容，如何让容器可滚动。

问题似乎是 flexbox 没有对其元素应用任何高度。

<div ng-app>
  <div ng-controller="Ctrl">
    <div class='container'>
      <div class='item' ng-repeat="item in items">
        <div class='item-inner'>{{item.text}}</div>
      </div>
    </div>
  </div>
</div>

http://jsfiddle.net/5eg2zn2d/

在 fiddle 中，您会看到项目挤在一起。

Answer 1

在这里，您可以将 flex-shrink: 0; 添加到您的 .item 元素，以适应不正确支持在 flexbox 中动态添加元素的浏览器。

因此您的代码变为：

.item {
  display: flex;
  margin: 3px;
  flex-shrink: 0;
}