CSS：溢出-x，显示：flex问题[重复]答案

【问题标题】：CSS: Overflow-x, display:flex issues [duplicate]CSS：溢出-x，显示：flex问题[重复]
【发布时间】：2017-01-08 17:31:26
【问题描述】：

我已经完成了 2 个与我遇到的问题相关的问题。但在这里我创建了一个更好的例子。请看下文。 Angular ng-bind 正在加载这些框。

请看下面的代码笔： http://codepen.io/anon/pen/LRPwZP

同样，我将相同的 sn-p 包含到 stackoverflow 中，但请注意，无法调整分辨率大小，因此，该示例可能没有用。

注意期望的行为非常重要：

每个框的宽度相同（实际为 700 像素）
希望框 #1 位于左上角。
只有在有足够空间的情况下，才希望框 #2 位于框 #1 的右侧。
如果屏幕仍有空间，则框 #3 位于框 #2 的右侧。
现在，假设框 #3 的右侧不再有空间
框 #4，位于框 #1 的底部。
框 #5，直接位于框 #2 的底部。
框 #6，直接位于框 #3 的底部。
等等……
框是使用 Angular ng-bind 加载的，并且是动态的。

我无法使用以下选项：

(1)

:nth-child(odd) { float: left; }
:nth-child(even) { float: right; }

原因：当您需要超过 2 列时无用且失败。

(2) 我知道 AngularJS Masonry，我不想增加加载时间，我想只使用 CSS 来完成。

供参考：

没有使用任何 CSS 框架。
正在使用纯“Vainilla”JS - 偶尔。
AngularJS 被大量使用。

以前的问题，相同的问题：

亲切的问候，克里斯，

【问题讨论】：

另一个更好的欺骗目标 - stackoverflow.com/q/8470070/2930477

标签： javascript html css angularjs flexbox

【解决方案1】：

为什么不使用 flex？

ul{
  background-color: #ffeb00;
  list-style: none;
  padding: 20px;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
}
li{
  padding: 35px;
  margin: 5px;
  background-color: #8056ff;
  color: white;
  text-align: center;
  flex-basis: 40px;
}

<ul>
  <li>Box 1</li>
  <li>Box 2</li>
  <li>Box 3</li>
  <li>Box 4</li>
  <li>Box 5</li>
  <li>Box 6</li>
</ul>

【讨论】：

【解决方案2】：

所以，经过几天对 Masonry、Isotope 以及一些不同的 Angular 和 JQuery 模块的测试......其中大多数需要大量变通方法才能正常运行......并且在尝试了不同的 ng 指令和模块之后由用户制作，以制作有角度的砖石，而不使用它。我找到了解决方案：AngularMaterial。 https://material.angularjs.org/latest/layout/options 可能很明显，但有时需要时间来了解您在寻找什么。

【讨论】：